如何停止多个不透明动画队列？ （jQuery的）

Question

- 我有这两个分区标签。

<div id="div1">Hover me to show Div2</div>
<div id="div2">Div2</div>

-i在CSS

中将div2的不透明度设置为0

- 我想要发生的是当我悬停div2时，它的不透明度将从0变为1

- 所以我把它放在jQuery中

$("#div2").mouseenter(function(){
    $("#div2).fadeTo("fast", 1);
});

- 当你徘徊时，它会回到0

$("#div2").mouseleave(function(){
    $("#div2).fadeTo("fast", 0);
});

-it工作得很好，但我的问题是当我多次重复盘旋div2时，动画排队并且它会一遍又一遍地做悬停动画

- 我想要发生的是当我再次悬停div2时它将停止上一个动画并重新开始

我该怎么做？

我不能使用CSS3过渡因为我必须在IE9上运行它，非常感谢提前，这里是JSFiddle

Answer 1

你可以这样做：

$(document).ready(function(){
    $("#div2").mouseenter(function(){
        $("#div2").stop( true, true ).fadeTo("fast", 1)
    });

    $("#div2").mouseleave(function(){
        $("#div2").stop( true, true ).fadeTo("fast", 0)
    });
});

JSFIDDLE：http://jsfiddle.net/d8MQb/3/

说明：http://api.jquery.com/stop/

Answer 2

使用.stop()：

$("#div2").stop().fadeTo("fast", 0);

并且您不需要在此处使用#：

<div id="div2">Div2</div>

---

Your fiddle

Answer 3

使用jQuery clearQueue：http://api.jquery.com/clearqueue/

$(document).ready(function(){
    $("#div2").mouseenter(function(){
        $("#div2").clearQueue().fadeTo("fast", 1)
    });

    $("#div2").mouseleave(function(){
        $("#div2").clearQueue().fadeTo("fast", 0)
    });
});

示例JSfiddle：http://jsfiddle.net/d8MQb/2/