Question

我正在创建一个错误消息显示框，该框滑出，延迟3秒，然后使用Mootools滑入。这就是我现在正在做的事情，如何纠正它以使其适合我？

var slide = new Fx.Slide($("error"));
slide.slideOut('horizontal').chain(function(){
    $("error").set("text", message);
}).chain(function(){
    this.slideIn('horizontal').delay(3000);
}).chain(function(){
    this.slideOut('horizontal');
});

Answer 1

你基本上你的mootools是正确的，但缺少一些可以让你的脚本正常运行的关键项目。我在下面粘贴了一个工作版本，然后发表了一些评论：

var slide = new Fx.Slide($("error"));
slide.slideOut('horizontal').chain(function () {
    $('error').set('text', message); this.callChain(); //NOTE
}).chain(function () {
    this.slideIn('horizontal');
}).chain(function () {
    this.slideOut.delay(3000, this, 'horizontal'); //NOTE
});

注意this.callChain（）第3行。没有这个是什么阻止你看到任何东西。 Fx类使用callChain（）方法内部启动下一个顺序，但如果你的 chain（）的参数不包含在Fx的方法之一，callChain（）是没有打电话，所以你必须这样做手动。
你的延迟电话是在错误的地方。 Delay（）延迟执行它所应用的函数，它不会在链中插入一个暂停。因此，要显示3秒的错误消息，您需要为最后一个函数调用添加延迟，因为这是您想要减速的那个
您的延迟电话不正确。延迟适用于函数，而不是函数的返回值，因此Dimitar的建议如上。有关详细信息，请查看mootools核心文档中的function
听到它的声音，你没有安装firebug。这可以让你探索DOM，发现你的代码改变了边距，然后改变了文本，但之后没有任何反应。 Firebug非常有用，所以请尽快安装
我的解决方案（mootools 1.3）在下面，基本上反映了dimitar所暗示的内容：

    $('error').set('slide', { 
        mode: 'horizontal' 
    }).get('slide').slideOut().chain(function () {
        $('error').set('text', message); this.slideIn();
    }, function () {
        this.slideOut.delay(3000, this);
    });

希望有所帮助

显示一个消失的消息框，延迟3秒并使用Mootools滑入？

1 个答案: