javascript - jQuery and CSS causing text to move oddly after animation -
i have created fiddle scrolls box down , up, text "hide" , "show" move bit when animation has finished. have tried few different things cannot scroll correctly.
$('a#maintoggle').click(function(){ if ($('a#maintoggle').hasclass("down")) { $('a#maintoggle').removeclass("down"); $('a#maintoggle').addclass("up"); $('#contentcollapse').stop(true, true).animate({height: '30px'},1000,function(){ $('#contentcollapse').css("display", "none"); $('a#maintoggle').addclass("hangdown"); }); $('a#maintoggle span').text("show"); $('#maintoggle em').html("<img src='img/show.gif' />"); } // end if else{ $('#contentcollapse').css("display", "block"); curheight = $('#contentcollapse').height(); $('a#maintoggle').removeclass("hangdown"); autoheight = $('#contentcollapse').css('height', 'auto').height(); autoheight = autoheight + 15; $('#contentcollapse').height(curheight).animate({height: autoheight}, 1000,function(){ $('a#maintoggle').addclass("down"); $('a#maintoggle').removeclass("up"); $('a#maintoggle span').text("hide"); $('#maintoggle em').html("<img src='img/hide.gif' />"); }); } // end else });