CODEWITHSUNDEEP
javascriptcallbackjquery-callback
John Shammas
John Shammas

Reputation: 2715

Callbacks not working properly

I'm at a loss. In this code, #options should wind up fading in, but it doesn't. The CSS attributes are set, though.

$("#content > p").animate({ opacity: '0' }, function() {
    $(this).css("display", "none");
    $("#options").css("opacity", "0").show(0, function() {
        $("#options").fadeIn();
    });
});

Upvotes: 1

Views: 87

Answers (3)

user113716
user113716

Reputation: 322492

Seems like it should work, but apparently you'd need to use the fadeTo()[docs] method instead of the fadeIn()[docs] method.

$('img').css("opacity", 0).show(0,function() {
    $(this).fadeTo(400, 1);
});

Although the show(0,func.. seems kinda pointless here, when you could just do:

$('img').css("opacity", 0).show().fadeTo(400, 1);

...unless the 0 you're giving for the .show() duration is actually a variable that may reference a larger number.

Upvotes: 2

SeanCannon
SeanCannon

Reputation: 77966

You can simplify your code a lot - remember setting opacity to 0 will replicate the visibility:hidden CSS attribute, whereas fadeOut() will replicate the display:none CSS attribute. The one critical difference between these two is that the latter will remove the element from rendered DOM so it will not take up space on the screen and the surrounding nodes won't even know it's there. The former will create a big empty box where the element still is but you just can't see it. Assuming you want to use the latter which is the most common, this should work:

$('#content > p').fadeOut('slow', function() {
    $('#options').fadeIn();
});

Upvotes: 0

alex
alex

Reputation: 490243

The opacity is still being set as 0.

You can change the fadeIn() to...

$("#options").animate({ opacity: 1}, 500);

jsFiddle.

Upvotes: 2

Related Questions