jQuery动画多个元素

Question

我正在尝试执行以下操作：

我在页面上有两组DOM元素。第一组中的所有元素都带有课堂 display-element, ，第二组元素带有课堂 edit-element.

现在我有一个按钮（id =edit-button）。当我单击此按钮时，我想要所有 display-elements 淡出，所有 edit-elements 出现。

我自然做到了：

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

令我惊讶的是，这没有预期。这就是发生的事情：一堂课的第一个元素 display-element 淡出了所有的 edit-elements 开始褪色。

现在有什么简单的方法（也许我错过的文档中的某些东西）使用了所有我可以拥有的 edit-elements 开始褪色 毕竟只有 display-elements 淡出了吗？

谢谢
JRH

Answer 1

为什么这会发生？我的意思是，看来您正在同时启动动画（只有一个电话 .fadeOut 毕竟，对吗？）。我想，这是因为$（）产生一个数组，当您打电话时 .fadeOut, ，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不是很强:)

Answer 2

好吧，没有找到任何“ nifty 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” :)

Answer 3

解决方案是在功能中的淡入段上使用settimeout

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

该JavaScript函数将延迟300 miliseconds的函数褪色的触发器

Answer 4

我只是遇到了一个类似的问题，发现“步骤”回调选项产生了所需的行为。

步骤：动画的每个步骤之后要调用的函数。

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

向下滚动到演示以获取步骤使用情况，您将看到它如何使您在单个对象上调用动画，然后使用步骤在动画的每个步骤中更新其余设置。这样，当动画完成时，只有一个回调。