jQuery Banner cancel function when mouseenter over a button

Question

I have a banner with 3 images that I wish to fade in and fade out using jQuery. I have this part working fine with the following code:

$j(document).ready(function() {
        initBanner();
  startLoop = setInterval(initBanner,50000);

  function initBanner(){
   $j("##image1").delay(10000).fadeOut(1500, function(){
    $j("##image2").fadeIn(1000, function(){
     $j("##image2").delay(10000).fadeOut(1500, function(){
      $j("##image3").fadeIn(1000, function(){
       $j("##image3").delay(10000).fadeOut(1500, function(){
        $j("##image1").fadeIn(1000);
        //inMotion = false;
       });  
      }); 
     }); 
    });
   }); 
  }

However below the banner are 3 links which have an image related to them. When I mouseenter on the buttons I want to change the image that is fading in and out to the image related to the button.

I have tried

clearInterval(startLoop)

however this waits for the animation to finish before clearing. What I want is to be able to stop the animation immediatley and fade in the relative image.

Any ideas?

jAndy jAndy · Accepted Answer · 2011-01-21T10:52:34

Your methods look a little bit odd, anyway to immediately stop all current animations you need to invoke the .stop() method to the animated element. You should pass in two arguments, both set to true which indicate (clearQueue && jumpToEnd);

function stopBanner() {
     clearInterval(startLoop);
     $('##image1, ##image2, ##image3').stop(true, true);
}

Again, you should reconsider your code. Caching DOM refs is a pretty important thing here for instance.

Ref.: .stop()

jQuery Banner cancel function when mouseenter over a button

1 Answers