jQuery .animate 不透明度回调函数

Posted

技术标签:

【中文标题】jQuery .animate 不透明度回调函数【英文标题】:jQuery .animate opacity callback function 【发布时间】:2012-01-08 01:28:56 【问题描述】:

我是 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 的动画。但是,这两个动画是同时发生的。

【问题讨论】:

应该按照您的描述工作。请出示相关的 html 代码。 【参考方案1】:

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

对于选择器匹配的每个对象,都会调用一次回调。会不会是 ID fall_content 的另一个元素已经隐藏了?因为如果是,那将立即调用 spring_content 动画,而无需等待 9 秒。

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

但是,从 cmets 中的代码可以看出,您使用了另一个选择器,它可能会产生多个元素。如果其中任何一个元素已被隐藏,则该元素将立即调用其回调。

要解决这个问题,您可以在选择器后添加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);

【讨论】:

感谢您的回复!老实说,我对 Jquery 非常陌生,我确信我所做的其他事情会搞砸这一切,但我真的不知道从哪里开始寻找。 “ID fall_content 的另一个元素”是什么意思?你的意思是还有什么导致#fall_content被隐藏...比如不同的类或id? 如果有帮助,这里是我所指的完整代码块。我的 jquery 中可能还有其他问题导致问题 >$(".spring_link").click(function() $("#fall_content, #store_content, #seen_in_content, #about_content, #ad_fall_content, #ad_spring_content, #ed_spring_content, #ed_fall_content").animate(opacity:'hide', 9000, function() $("#spring_content").animate(opacity:'show', top:'0px', 'fast'); $(".spring_link").addClass("active"); $(".fall_link").removeClass("active"); ); ); 这确实有帮助。您首先指定大量要隐藏的元素的 ID。当它们的淡入淡出完成时,您的回调将被调用一次为每个匹配的元素。如果 其中任何一个 被隐藏,则该元素将不会淡入淡出,并且将立即调用回调。 如果您将淡出更改为$('your ids...').not(':hidden').animate(...),您将过滤掉所有隐藏元素,这样您的集合中的任何元素都不会导致立即回调。 啊!好吧,这很有意义。我肯定要回去重新思考我是如何写这一切的,但这对我来说肯定有很大帮助!【参考方案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 不透明度回调函数的主要内容,如果未能解决你的问题,请参考以下文章

jQuery中的.animate()回调可以有阶梯函数和普通函数吗?

论jQuery中animate方法的回调问题

jQuery - 使用 .animate() 解析值“不透明度”时出错

影响错误元素的 Jquery 动画回调

jQuery、IE 和动画

jquery中的三组基础动画以及自定义动画