jquery为多个元素设置动画

为什么会这样,真的吗?我的意思是,看起来,你是同时启动动画(只有一个调用 .fadeOut 毕竟,对吗?).I猜想,这是因为$()生成一个数组,并且当您调用 衰落 jquery遍历数组,并为每个元素执行它执行的任何操作。从第一个开始。因为回调会“附加”到每个动画,所以您可以看到第一个回调的可见效果。

我猜,您可以通过自己遍历返回元素的数组,并确保只将回调附加到最后一个元素,来回避这个问题。

$('#edit-button').click(function(){
    var display_elements = $('.display-element');
    var len = display_elements.length;
    for (var i = 0; i < len-1; i++) {
        $(display_elements[i]).fadeOut(300); // no callback
    }
    $(display_elements[len-1]).fadeOut(300, function() {
        $('.edit-element').fadeIn(300);
    }); // last element - attach callback
});

很抱歉,如果代码关闭,我必须承认,我的javascript fu不是很强:)

好吧,由于没有找到任何“漂亮的API方法”,我决定:

$('#edit-button').click(function() {
    var displays = $('.display-element');
    var counter = 0;
    var max = displays.length;
    displays.fadeOut(300, function() {
        counter++;
        if( counter>=max ) $('.input-element').fadeIn(300);
    }
});

这基本上是@shylent的答案,还有更多的'javascript fu':)

解决方法是在淡入函数上使用setTimeout

$('#edit-button').click(function(){
    $('.display-element').fadeOut(300);
setTimeout("$('.edit-element').fadeIn(300);", 300);
});

这个javascript函数会将函数的淡入淡出触发器延迟300毫秒。

我刚刚运行了一个类似的问题,发现“step”回调选项产生了所需的行为。

步骤:在动画的每个步骤之后调用的函数。

^ http://api.jquery.com/animate/

向下滚动到演示以了解步骤的用法,您将看到它如何使您能够在单个对象上调用动画,然后使用步骤更新动画的每个步骤中设置的其余部分。这样,动画完成时只会触发一个回调。