在 MooTools 1.1 中一段时间后淡入或清除 div 元素答案

【问题标题】：Fade or clear div element after a period in MooTools 1.1在 MooTools 1.1 中一段时间后淡入或清除 div 元素
【发布时间】：2011-05-10 19:04:27
【问题描述】：

您好我正在尝试在 1.1 中模拟 mootools 1.2 中提供的淡入淡出方法。由于开发限制，我必须使用 1.1。我基本上在 ajax 响应后更新我的 div，我希望这个 div 在一段时间后被清除

var resp = Json.evaluate(response); $(elem).setHTML('谢谢！'); //显示一会消息，然后清除div

感谢您的回复，我正在尝试使用 Dimitar 的方法，但由于我根本不是 MooTools 专家，因此我需要一些帮助

window.addEvent('domready', function(){ $(link_id).addEvent('click', function(){ var a = new Ajax('{$url}'+this.id, { 方法：'得到'， onComplete: 函数（响应）{
var resp = Json.evaluate( 响应 ); $(resp.id).setHTML('谢谢'); //我的愚蠢做法 //setTimeout('$("'+divname+'").setHTML("")',3000);
} }).request();
});
}

那么在我的代码上下文中，我应该在哪里定义您建议的 Element.extend？我只是尝试将其添加到 domready 函数中，但无法识别淡入淡出方法

【问题讨论】：

检查通过element.empty() 更新的回复 - Function.delay(nnn) 在 mootools 1.1x/1.2.x 中用于推迟某些事情（通过 setTimeout）。

标签： javascript mootools

【解决方案1】：

要在 1.1x 中定义元素原型，您需要 Element.extend

Element.extend({
    fade: function(from, to, remove) {
        new Fx.Style(el, "opacity", {
            duration: 500,
            onComplete: function() {
                if (remove)
                    this.element.remove();
            }
        }).start(from, to);
    }
});

var el = $("elem");

el.setHTML('Thanks!');

(function() {
    el.fade(1,0, true);
}).delay(2000);

在这个例子中，我创建了一个简单的 element.fade()，它确实需要开始和结束值，如果你不打算再次需要它，可以选择从 dom 等中删除元素。

这是一个工作示例：http://jsfiddle.net/dimitar/cgtAN/

编辑根据您清空 html 的要求：

window.addEvent('domready', function() {
    $(link_id).addEvent('click', function() {
        new Ajax('{$url}' + this.id, {
            method: 'get',
            onComplete: function(response) {
                var resp = Json.evaluate(response), target = $(resp.id);
                target.setHTML('Thank you');
                (function() {
                    target.empty();
                }).delay(3000);
            }
        }).request();
    });
});

【讨论】：

呵呵！ :) 当我回答时没有看到你的回复，我可能只是勉强回答了。感谢 +1 - 等待 3k 能够投票关闭/重新打开！ :)

【解决方案2】：

从不经常使用 Mootools，但是在使用了一些 jsfiddle 之后，似乎这些方面的东西会起作用：

function fadeAfter(id, msec)
{
    setTimeout(function(){    
        new Fx.Styles(id).start({'opacity': ['1', '0']});
    }, msec);
}

【讨论】：

【解决方案3】：

好的，我找到了使用 setTimeout 的解决方案

setTimeout('$("'+divname+'").setHTML("")',3000);

其中 3000 以毫秒为单位的等待时间

【讨论】：

mootools 有一个元素方法 .empty() 而不是 setHTML(""); - 建议在调用垃圾收集时使用它。