如何停止 DIV 的 mouseenter 上的动画

Question

我试图找到一种方法，当鼠标位于黑色区域时停止淡入/淡出动画：

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;}

每次鼠标在该区域内移动时，该函数都会循环。我怎样才能避免这种情况？

Answer 1

很难确切地说出它的用途（意图是什么），但我会尝试使用 jQuery hide()函数并使用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/