當鼠標進入jquery時，如何停止fadein和fadeout動畫？

Question

當鼠標進入jquery時，如何停止淡入淡出和淡出動畫？ 我有這樣

function fadeItIn() { 
    $('.banner_outer1').fadeIn(time, function() { 
     $('.banner_outer1').mouseenter(function(){ 
      //stop animation 
      }); 
     $('.banner_outer1').mouseout(function(){ 
      //start animation 
      });  
     setTimeout(fadeItOut, 1400); 
     //fadeItOut(); 
    }); 
} 

function fadeItOut() { 
    $('.banner_outer1').fadeOut(time, function() { 
     $('.banner_outer1').html(banner_outer2); 
     banner_outer3 = banner_outer2; 
     banner_outer2 = banner_outer1; 
     banner_outer1 = banner_outer3; 
     fadeItIn(); 
    }); 
} 

我想停止動畫當鼠標進入到div和播放動畫時鼠標離開DIV代碼。我如何在jQuery中做？

Answer 1

<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     function bind() 
     { 
      $('.fader').bind('fade-cycle', function() { 
       $(this).fadeOut('fast', function() { 
        $(this).fadeIn('fast', function() { 
         $(this).trigger('fade-cycle'); 
        }); 
       }); 
      }); 
     } 
     bind(); // binding fade-cycle trigger to .fader 
     $('.fader').trigger('fade-cycle'); // starting animation by triggering fade-cycle event 

     $('.fader').mouseover(function(){ 
      $('.fader').unbind('fade-cycle'); // stopping animation by unbinding the fade-cyle 
     }); 
     $('.fader').mouseout(function(){ 
      // restart animation by rebinding and triggering the fade-cycle event 
      bind(); 
      $(this).trigger('fade-cycle'); 
     }); 
    }); 
</script> 

<div class="fader"> 
    paste your content here that you want to animate (fadein & fadeout continuously) 
</div> 

Answer 2

$('.banner_outer1').hover(
    handlerIn, 
    handlerOut 
); 

function handlerIn(){ 
    // do some stuff here on mouseenter 
} 

function handlerOut(){ 
    // do some stuff here on mouseout 
} 

http://api.jquery.com/hover/

Answer 3

你可以嘗試設置一個布爾變量在鼠標懸停事件.. 並用它來停止動畫

var shouldAnimate; 

$('.banner_outer1').mouseOver(function(){ 
    shouldAnimate = false; 
}); 

$('.banner_outer1').mouseLeave(function(){ 
    shouldAnimate = true; 
}); 

function fadeItIn() { 
    if (shouldAnimate){ 
    $('.banner_outer1').fadeIn(time, function() { 
     $('.banner_outer1').mouseenter(function(){ 
      }); 
     $('.banner_outer1').mouseout(function(){ 
      });  
    }); 
    } 
    setTimeout(fadeItOut, 1400); 
} 

function fadeItOut() { 
    if (shouldAnimate){ 
    $('.banner_outer1').fadeOut(time, function() { 
     $('.banner_outer1').html(banner_outer2); 
     banner_outer3 = banner_outer2; 
     banner_outer2 = banner_outer1; 
     banner_outer1 = banner_outer3; 
     fadeItIn(); 
    }); 
    } 
}