jQuery的slideUp / slideDown的奇怪问题

Question

I use the following code on a website:

  // show tracks
  $('.content-playlist .track p').live('click', function() {
    var player_handle = $(this);
    $('.content-playlist .track .player').slideUp('slow', function() {
      player_handle.next().slideDown('slow');
    });
  });

Which should first closes any music players on the site (if any) and after that open the selected one.

Clicking the first track works as expected.

However I'm having a strange issue:

When clicking on the third track it opens, closes and opens again. (not what I want)

An example is online @: http://www.psykotaktyle.com/index.php?page=playlist

I just cannot find out what´s wrong with my code. Any help is much appreciated!

EDIT

Tested with Chrome (v13), IE9 and FF4

Answer 1

DEMO

$('.player').hide();
$('.content-playlist .track p').live('click', function() {
    $('.player:visible').slideToggle(600);
    $(this).next('.player').slideToggle(600);
});

Answer 2

This sounds like animation queuing as described at http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup

Try:

$('.content-playlist .track .player').stop().slideUp('slow', function() {
      player_handle.next().stop().slideDown('slow');
    });