$(document).ready(function () { $("#icont").mouseover(function () { $('#icont').html($('#cont2').html()); }).mouseout(function () { $('#icont').html($('#cont1').html()); }); $('#test').hover(function () { if ($('#stext').is(':hidden')) { $('#stext').show('slow'); $('#test img').hide('slow'); } else { $('#stext').hide('slow'); $('#test img').show('slow'); } }) })

Very twitching when hovering.

    2 answers 2

    Both hide and show are executed asynchronously, i.e. the code following the call continues to be executed, despite the fact that the function has not yet completed. If you want them to be executed sequentially, set hide in the callback for show . Read more at the jQuery docks .

       $('#stext').show('slow') .queue(function(){ $('#test img').hide('slow') });

      Like that.