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

好吧，没有找到任何'漂亮的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 2

为什么会发生这种情况呢？我的意思是，你似乎是在同一时间开始制作动画（毕竟只有一次调用.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 3

解决方案是在函数的淡入淡出中使用setTimeout

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

该javascript函数将延迟触发300毫秒的函数衰落

Answer 4

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

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

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

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

jquery动画多个元素

4 个答案: