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(开发者_JAVA技巧"opacity", "0").show(0, function() {
        $("#options").fadeIn();
    });
});

The opacity is still being set as 0.

You can change the fadeIn() to...

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

jsFiddle.

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.

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