javascript - 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

好吧，由于没有找到任何“漂亮的 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”:)