jQuery animation callback running early

Question

I created jsfiddle and the code(a click version of the following) works fine, but on my actual site the text switches before it hides. This makes the whole thing look ridiculous. I am using icefaces, which reloads certain parts of the page and that's when the code is running. Essentially I'm animating the change that icefaces sends.

function slideValue(id, newValue){
id = id.replace("`", ""); 

val = '#' + id;
if(jQuery(val).text() != newValue){
    jQuery(val).hide('slide',{
        duration: 300,
        direction: 'up',
        complete: function(){jQuery(val).text(newValue);}
    });
    jQuery(val).show('slide', {direction: 'down'}, 300);
}

}

Answer 1

No matter how I tried to set up a queue, this wasn't working. It worked fine on JSfiddle but not in the actual web application. I eventually got this to work by using javascripts setTimeout() method.

Answer 2

you can try

$('#hey').click(function () {
newValue = "newwww";
val = '#' + "hey";
if (jQuery(val).text() != newValue) {
    jQuery(val).hide('slide', {
        duration: 300,
        direction: 'up',
        complete: function () {
            jQuery(val).text(newValue);
            jQuery(val).show('slide', {
                direction: 'down'
            }, 300);
        }
    });
}
} );    

http://jsfiddle.net/RAQzm/5/