Question

I have a 3 * 3 photo collage and want the corresponding text summary of the photo show up if the photo is moused over. The text summary is contained in a div with id summary-container.That being said, the previous text summary will be replaced by the current text with a slide animation effect. Below is the piece of javascript codes.

$('#photo-collage').find('.span4').hover(function(){  
      $('#summary-container').fadeOut();
      $('#summary-container').show('slide',{direction: 'left'},1000);
      $('#summary-container').load(url,data);
},function(){});

It works well if I hover over from one photo to the other. But the problem is, e.x, if I hover over from photo 1 to photo 4 while crossing photo 2 and photo 3, the show() function is called two more times. So there are two more slide animations, which is not necessary.

How should I adjust my codes to solve this problem?Thanks

Answer 1

Try

$("#summary-container").clearQueue().stop();

to clear the animation-queue.