在MooTools 1.1中经过一段时间后淡化或清除div元素

时间:2010-11-16 12:27:23

标签: javascript mootools

您好我正在尝试模拟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:function(response){
                              var resp = Json.evaluate(response);                                  $(resp.id).setHTML('谢谢你');   //我的愚蠢方法//setTimeout('$("'+divname+'").setHTML("")',3000);

                                         }                                       })请求();
                          });
                      }

所以在我的代码的上下文中,我应该在哪里定义你提出的Element.extend? 我只是尝试将其添加到domready函数中但无法识别淡入淡出方法

3 个答案:

答案 0 :(得分:2)

在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 :(得分:1)

从来没有使用过Mootools,但经过一些jsfiddle之后,似乎这些内容会起作用:

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

答案 2 :(得分:0)

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

  

的setTimeout( '$( “ '+ divname +”')setHTML( “”)。',3000);

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