0

我试图让一个回调在完成后执行另一个。但由于某种原因，它一次完成了所有这些。

这是代码：

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

    });
});

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

4

3 回答 3

0

尝试查看.whenand .done。

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

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

于 2013-04-29T22:41:53.957 回答
0

我将您的代码放入 jsFiddle 中，它对我有用。虽然我怀疑你visibility:hidden在 CSS 中使用过，而我使用过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});
        });
    });
});

和一把小提琴

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

这是另一个同样使用的小提琴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});
                });
      });

});
于 2013-04-29T22:58:21.193 回答
0

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

谢谢

一切为了您的帮助

于 2013-04-29T23:13:00.057 回答