CSS properties in jQuery .load() callback function

Question

I want to grab some content using jQuery's .load() method, then fade it in with a CSS3 transition, changing the opacity from 0 to 1. The opacity is already set to 0 in the CSS, along with the transition properties. so all I should have to do is change opacity once the new content has loaded.

I thought this would do it:

function loadContent(url) {
$('#panel-b').load(url + " #content", function() {
    $('#content').css("opacity", 1);
});
}

The content loads just fine, but it doesn't fade in. The opacity immediately goes to 1 with no transition effect. I thought it might be a synchronization issue, so I tried wrapping the callback in a setTimeout, and that actually did fix it -- but WHY? Even if the timeout is set to 0 it still works.

function loadContent(url) {
$('#panel-b').load(url + " #content", function() {
    setTimeout(function() {
        $('#content').css("opacity", 1);
    }, 0);
});
}

And oddly enough, this works too. What does .show() have that .css() doesn't?

function loadContent(url) {
$('#panel-b').load(url + " #content", function() {
    $('#content').show().css("opacity", 1);
});
}

Am I missing something fundamental? Any insight would be much appreciated.

NOTE: I know that the fade in effect can be achieved using jQuery's animate or fadeIn methods, but that's not the goal here.

Answer 1

You're changing the CSS of the element before its rendered so the UI never sees the initial opacity and as far as its concerned the opacity never changed.
With setTimeout, even though you put the time out to 0 seconds control still goes back to the UI before the scheduled function executes. In this case the the first opacity is seen then the change triggers the transition.