Callback Inside Callback

Question

I'm trying to have a call back execute another when it finishes. But for some reason it's doing them all at once.

Here is the code:

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

    });
});

I would like #hero to fade in as oppose to it displaying immediately would this be the best way?

Answer 1

I put your code into jsFiddle and it works for me. Although I suspect you used visibility:hidden in your CSS whereas I've used display:none. I've commented out the css() code for (this) because I don't think you need it and I refactored it a little, but it works absolutely fine as it is;

#hero {    display:none; }

Here's some code that works (but your code works as is too with the above 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});
        });
    });
});

and a fiddle

(click on 'video' to test)

Here's another fiddle that does the same using visibility:hidden as well.

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

});