Question

我是jQuery的新手，非常感谢任何帮助！

我正在尝试编写一个简单的.animate函数，该函数使用回调一个接一个地运行两个不同的动画。

这是我目前的代码：

  $(".spring_link").click(function(){
    $("#fall_content").animate({opacity:'hide'}, 9000, function() { 
      $("#spring_content").animate({opacity:'show', top:'0px'}, 'fast');
    });
  });

我假设这会导致#fall_content被隐藏，然后一旦完成，将运行应用于#spring_content的动画。但是，这两种动画都是在同一时间发生的。

Answer 1

您的假设是正确的：Working demo。

对于由选择器匹配的每个对象，将调用一次回调。可能是ID fall_content的另一个元素已经隐藏了吗？因为如果是，那将立即调用spring_content动画，而不等待9秒。

在引用的代码中，这不可能发生，因为选择器$('#fall_content')永远不会产生多个元素。（即使是多个相同ID的元素，这是无效的HTML，jQuery也只会产生第一个元素）。

但是，从注释中的代码可以看出，您使用的是另一个可能产生多个元素的选择器。如果其中任何一个元素已经被隐藏，那么该元素将立即调用它的回调。

要解决此问题，您可以在选择器后添加not(':hidden');过滤掉任何已隐藏的项目，这意味着所有剩余的项目将在9秒后调用淡入。

现在，除了你可能会同时进行多次调用之外，你还会引入另一个可能的问题 - 如果选择器中的所有元素都被隐藏了。要求隐藏的元素在隐藏后调用回调，完全是要求 no elements 在隐藏后调用回调：

// this will invoke the callback immediately
$('#already-hidden-element').animate({ opacity: 0 }, function() { ... });

// this will never invoke the callback
$('#id-that-does-not-exist').animate({ opacity: 0 }, function() { ... });

所以，如果这可能是你的一个问题（也许即使你认为它不会，因为要求可能会在以后改变，在这种情况下，这个问题将很难追查），这是一个你可能想要反驳到超时的情况：

var delay = 9000;
$('#bunch, #of, #IDs').animate({ opacity: 0 }, delay);
setTimeout(function() {
    $('#spring_content').animate({ opacity: 1 }, 'fast');
}, delay);

现在你的超时保证只发生一次，并且总是在淡出开始后的9秒之后。请注意，我们所讨论的是从一开始就隐藏所有元素的场景。在这种情况下，您可能不想要在显示弹簧内容之前等待9秒，而是立即将其淡化，就像在原始animate行为中一样。在这种情况下，您必须有条件地设置延迟：

var elements = $('#bunch, #of, #IDs').not(':hidden');
var delay = elements.length == 0 ? 0 : 9000;

elements.animate({ opacity: 0 }, delay);
setTimeout(function() {
    $('#spring_content').animate({ opacity: 1 }, 'fast');
}, delay);

Answer 2

var wait = setInterval(function() {
if( !$("#element1, #element2").is(":animated") ) {
    clearInterval(wait);
    // This piece of code will be executed
    // after element1 and element2 is complete.
}
}, 200);

您可以使用设置间隔等待其他操作完成。

jQuery .animate不透明度回调函数

2 个答案: