jQuery Banner cancel function when mouseenter over a button

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?

---

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()