如何在鼠标进入一个DIV时停止动画

Question

我正在尝试找到一种方法，当鼠标移到黑色区域上时停止fadeIn/fadeOut动画： http://jsfiddle.net/AeZP4/1/

$(function(){
    $('.text').mouseenter(function(){
        $(this).stop(true,true).fadeOut();
    }).mouseleave(function(){
        $(this).stop(true,true).fadeIn();
    });
});

<div id="container">
    <div class="text">s</div>
</div>

#container{width:600px; height:100%; position:relative;}
.text{position:absolute; left:0; top:0; width:200px; 
      height:800px; background:#000000;}

每当鼠标在该区域内移动时，函数都会循环执行。如何避免这种情况发生？

- Warface

Answer 1

很难确定这将被用于什么（意图是什么），但我会尝试使用jQuery的hover()函数，并使用fadeTo()将元素淡化为0不透明度。

$(".text").hover(
  function () {
        $(this).stop(true, true).fadeTo('slow', 0)
  }, 
  function () {
        $(this).stop(true, true).fadeTo('slow', 1)
  }
);  

但是这可能取决于您的使用情况。

例如：http://jsfiddle.net/AeZP4/3/

编辑：根据maxfieldens的建议添加了stop()：http://jsfiddle.net/AeZP4/6/

- jyoseph

---

+1 - 我唯一想要添加的是在 fadeTo 调用前加上 .stop(true)。 - user806273

我建议将其设置为stop(true)，并删除第二个true。这会使它更加流畅。 - bretterer

Answer 2

原始代码的真正问题在于将fadeOut和mouseleave应用于同一元素。如果您在鼠标悬停在div上时进行fadeOut，则该元素会消失，因此mouseleave事件将被触发。mouseleave处理程序调用fadeIn并使div再次可见，从而触发mouseenter事件，我们从头开始循环。这是一个经典的无限循环：http://jsfiddle.net/AeZP4/1/ fadeTo函数工作良好，因为在这种情况下，div是透明的，但没有消失（display:none）。

- Simon