鼠标进入jquery时如何停止淡入淡出动画？答案

【问题标题】：How stop fadein and fadeout animation when mouse enter in jquery?鼠标进入jquery时如何停止淡入淡出动画？
【发布时间】：2012-11-23 06:22:56
【问题描述】：

鼠标进入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 中怎么做？

【问题讨论】：

你想要this 吗？
我需要在启动时开始动画。

标签： javascript jquery

【解决方案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>

【讨论】：

【解决方案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/

【讨论】：

【解决方案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();
    });
  }
}

【讨论】：