jQuery stop action “breaks” animation

Question

I have the following code:

function play_fu() {
   $( "#main_photo img" ).fadeOut(250, function() {
      //change photo with new photo ++
    }).fadeIn(-250, play_fu).delay(400); 
}

$( "#play" ).click(function() {
   $(this).hide();
   $( "#pause" ).show();

   play_fu();
});


$( "#pause" ).click(function() {
   $( "#main_photo img" ).stop(true);
   $(this).hide();
   $( "#play" ).show();
});

As you can see because of function play_fu , #main_photo img is always animated (something is added into its animation queue). When I click pause I want the last animation to take place, so to change photo with new photo, then fadeIn and then stop.

Now, what happens is that a new photo could not have yet faded in and the animation will immediately stop while clicking pause . Any ideas how to solve this?

Answer 1

它应该是

$( "#main_photo img" ).stop(false, true);