jQuery .animate 不透明度回调函数

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 秒后调用淡入。

现在，除了您可能同时执行多个调用这一事实之外，您还引入了另一个可能的问题 - 如果选择器中的所有元素碰巧都被隐藏了。要求已经隐藏的元素在隐藏后调用回调，与要求没有元素在隐藏后调用回调完全是另一回事:

// 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 秒后发生。请注意，我们正在讨论一种场景，其中所有元素可能从一开始就被隐藏。在这种情况下，您可能不想在显示 spring 内容之前等待 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);