Eliminate bouncing ball effect on slidetoggle

Question

It seems like it's in a bit of a loop for a few and then it stabalizes. This person had a similar problem in this video: http://www.youtube.com/watch?v=KCFeImyBzfE

Also, another problem with this code is that once you show the tracklist, then hide it again, the words stop toggling. it ends up saying "hide tracklist" and they are already hidden.

<script type="text/javascript">
$(document).ready(function() {
   $('.fullTracks').hide();
   $('.tracklist').click(function() {
      $('.fullTracks').slideToggle('medium');
      if ($('.fullTracks').is(':hidden')) {
         $(this).text('Show Tracklist');
      } else {
         $(this).text('Hide Tracklist');
      }
   });
});
</script>

Answer 1

That is because the previous sliding effect has not finished yet, so it queues up to be fired multiple times.

Try the .stop() before the slideToggle(). This will remove any previous events and then fire a new one.

Source

http://api.jquery.com/stop/