Search code examples
jquerydelaysettimeoutfadeinfadeout

jquery delay and setTimeout

I'm trying to stall the hiding of a span while the other spans fadein over top of it, but delay and settimeout don't seem to be working, on mouseout the page flashes white before the other 3 images fade in on top. The delay is on the mouseout function. Here is the fiddle

  $("#top-left").mouseover(function() {
        $("#bottom-left").fadeOut(200);
        $("#bottom-right").fadeOut(200);
        $("#top-right").fadeOut(200);
        $( this ).css( "width","+=400");
        $( this ).css( "height","+=250" );
        $( this ).css( "z-index", "-1");
    });
  $("#top-left").mouseout(function() {
        $("#bottom-left").fadeIn(200);   
        $("#bottom-right").fadeIn(200);
        $("#top-right").fadeIn(200).delay(10000);
        setTimeout(function() {
                $( this ).css( "width","-=400");
                $( this ).css( "height","-=250" );
                $( this ).css( "z-index", "1");
        },400);
    });

Thank you.

Solution

  • Fire the last part as a callback on the animations:

    $("#top-right").fadeIn(200, function() {
  $("#top-left").css( "width","-=400").css( "height","-=250" ).css( "z-index", "1");
});

    that way it won't execute until the animation is done.