Question

如何在这个jQuery的淡入淡出序列结束时触发一个事件？

$(function () {
    $('div#fds img').each(function (i) {
        $(this).delay((i++) * 1000).fadeTo(1500, 1);
    })
});

这会使#fds div中的img从0到1逐渐消失，每次超过1.5秒 - 一旦最后一个淡入到不透明度值1，我需要的是将变量END从0更改为1。

关于如何做到这一点的任何想法？面向对象的代码从来就不是我的强项......

谢谢你们！

Answer 1

根据http://api.jquery.com/fadeTo/

中的文档，jQuery中fadeTo的语法

.fadeTo( duration, opacity [, complete ] )

complete是一个可选的回调函数，在fadeTo操作完成后触发。

在您的代码中，这将是：

$(function () {
    $('div#fds img').each(function (i) {
        $(this).delay((i++) * 1000).fadeTo(1500, 1, function() {
           // executed when done fading
        });
    })
});

Answer 2

动画现在返回一个承诺，在等待多个动画时会派上用场：

$(function(){
    var end = 0;
    $.when(
        $('div#fds img').each(function(i){
            return $(this).delay((i++)*1000).fadeTo(1500,1);
        })
    ).then(function() {
        end = 1;
    })
});

FIDDLE

Answer 3

   $(this).delay((i++) * 1000)
    .fadeTo(1500, 1, function(){
          $(".fire_event_class_or_id").trigger('click');  // can fire the trigger that is declared.
    });

Answer 4

这应该有效。它结合了fadeTo方法中的回调和简单的检查，看看我们是否在函数的末尾。我已经将i ++更改为i + 1，因此它不会干扰回调中的逻辑（当你回到它时会变得混乱）：

$(function(){

    var len = $('div#fds img').length;

    $('div#fds img').each(function(i){
        $(this).delay((i+1)*1000).fadeTo(1500,1,function(){
            if(i == len - 1){
                END = 1;
            }
        });
    });

});

淡出动画完成后的火灾事件

4 个答案: