jquery – 如何在DIV的mouseenter上停止动画

我正试图找到一种方法来在鼠标悬停在黑色区域时停止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;}

每次鼠标移动到该区域内时,该功能都会循环播放.我怎么能避免这个？

解决方法

很难确切知道这将用于什么(意图是什么),但我会尝试使用jQuery hover()函数并使用 fadeTo()将元素淡化为0不透明度.

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

但根据您的使用情况,这可能不是正确的.

示例：http：//jsfiddle.net/AeZP4/3/

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