Question

I’m still learning jQuery and what I’m trying to do right now is combining the html() method with a transition ( e.g. hide() and show() ) in order to change the html of a div with a transition effect. This is what I tried:

$('div.content_box').hide(1000).html(return_html).show(1000);

Where div.content_box is the div which’s content/HTML should be changed with a transition and return_html contains the html that was returned by a PHP file which was requested through the ajax() method.

However, this does not give me the desired result. Instead of first hiding the div, then changing its html and then showing it again, it already changed the div’s HTML content when it’s still hiding it.

Does anyone know how I can make this work properly (where the actions are executed in proper order and one at a time)?

Answer 1

there are many ways to archive what you want:

Using callback on hide: http://jsfiddle.net/VbkNE/

$('div.content_box').hide(1000, function() {
    $(this).html(return_html).show(1000);
});

Using queue: http://jsfiddle.net/VbkNE/1/

$('div.content_box').hide(1000).queue(function(next) {
    $(this).html(return_html);
    next();
}).show(1000);

Using native setTimeout: http://jsfiddle.net/VbkNE/2/

$('div.content_box').hide(1000);
setTimeout(function() {
    $('div.content_box').html(return_html).show(1000)
}, 1000);

Using delay doesn’t work in your case, quote from jQuery API – delay:

Only subsequent events in a queue are delayed; for example this will not delay the no-arguments forms of .show() or .hide() which do not use the effects queue.

I would go for the callback method in this case – cause you don’t need to redefine your selector as in setTimeout and you don’t need to shift the queue stock as in next() in the queue example, but note how powerful the queue method is. Ex for chaining AJAX calls.