0

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

我在一个页面上有两组 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

4

4 回答 4

3

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

于 2010-01-09T14:53:51.380 回答
0

为什么会发生这种情况，真的？我的意思是，您似乎同时开始动画（.fadeOut毕竟只有一个调用，对吧？）。我猜，这是因为 $()​​ 产生一个数组，当你调用jQuery 时.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 不是很强大:)

于 2010-01-09T13:24:26.067 回答
0

解决方案是在淡入功能上使用 setTimeout

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

该javascript函数会将淡入函数的触发延迟300毫秒

于 2010-01-09T13:31:34.697 回答
0

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

step：动画的每一步之后要调用的函数。

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

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

于 2012-03-19T20:43:29.363 回答