回调内部回调答案

【问题标题】：Callback Inside Callback回调内部回调
【发布时间】：2013-04-29 22:37:12
【问题描述】：

我正在尝试让回调在完成后执行另一个。但由于某种原因，它同时完成了所有操作。

代码如下：

$('video#videopromo').bind('ended',function()
{                  
    $("#hero").fadeIn("slow", function()
    {
        $(this).css("visibility", "visible");
        $("#videopromo").css({zIndex: -1});
        $(this).css("display", "block");

    });
});

我希望#hero 淡入，而不是立即显示，这是最好的方式吗？

【问题讨论】：

请提供 HTML 和/或jsfiddle。
你的代码对我有用。
divisionforty.com如果你点击观看视频然后跳到最后它只是翻转不褪色
@cirrus 最后会褪色吗？

标签： jquery html callback fadein jquery-callback

【解决方案1】：

我将您的代码放入 jsFiddle 中，它适用于我。虽然我怀疑你在 CSS 中使用了visibility:hidden，而我使用了display:none。我已经注释掉了 (this) 的 css() 代码，因为我认为你不需要它并且我对其进行了一些重构，但它确实可以正常工作；

#hero {    display:none; }

这是一些有效的代码（但您的代码也可以与上述 CSS 一起工作）；

$(document).ready(function(){
  $("#videopromo").bind('click',function(e){  
        var videopromo = $(e.target);
        console.log(e.target);
        $("#hero").fadeIn("slow", function(){
              console.log("callback");
              //$(this).css({visibility:"visible",display:"block"});
              videopromo.css({zIndex: -1});
        });
    });
});

还有一个fiddle

（点击“视频”进行测试）

这是另一个fiddle，它也使用visibility:hidden 做同样的事情。

$(document).ready(function(){

  $("#videopromo").bind('click',function(e){  
        var videopromo = $(e.target);
        console.log(e.target);
      $("#hero").css({visibility:"visible"})
                .hide()
                .fadeIn( 500, function(){
                      console.log("fully faded in now");
                      videopromo.css({zIndex: -1});
                });
      });

});

【讨论】：

我遇到的问题是因为视频的定位绝对低于视频后面的内容/
我认为我解决了它：$("#videopromo").css("position", "relative");
我为您添加了另一个使用可见性的示例。

【解决方案2】：

尝试查看.when 和.done。

http://api.jquery.com/jQuery.when/ http://api.jquery.com/deferred.done/

这将允许您等到某事完成后再开始其他事。

【讨论】：

你将如何实现它？

【解决方案3】：

我通过扩展@cirrus 所说的内容解决了这个问题，而不是隐藏我给视频的元素 $("#videopromo").css("position", "relative");显示，因此内容不会出现在视频后面。一旦完成，它就会恢复！

谢谢

一切为了你的帮助

【讨论】：