回调内部回调

Question

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

代码如下：

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

    });
});

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

Answer 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

(点击'video‘进行测试)

下面是另一个使用visibility:hidden实现相同功能的fiddle。

$(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});
                });
      });

});

Answer 2

试着调查一下.when和.done。

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

这将允许您等到某件事完成后再开始另一件事。

Answer 3

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

谢谢

一切都是为了你的帮助