如何立即调用hover（）函数的handlerOut？

Question

我是Javascript＆amp;的新手。 jQuery一般。我有以下简单的jQuery代码片段来更改/动画圆的宽度：

<script type="text/javascript">
    $("#circle").hover(function() {
        $(this).animate({width: "100%"}, 3000)
    },function() {
        $(this).animate({width: "100px"}, 3000)
    });
</script>

然而，我真正想要的是中断handlerIn函数（第一个在悬停内部）并在我的鼠标离开圆圈时立即调用handlerOut。这意味着，当我将鼠标悬停在圆圈上时，圆圈应该动画（增加）宽度，但是一旦我的鼠标离开，它应该回动（减小）到原始宽度（而不是达到100％宽度然后返回）背部）。希望这是有道理的。感谢

Answer 1

看看是否有效。

http://api.jquery.com/stop/

<script type="text/javascript">
    $("#circle").hover(function() {
        $(this).animate({width: "100%"}, 3000)
    },function() {
        $(this).stop();
        $(this).animate({width: "100px"}, 3000)
    });
</script>

Answer 2

只需使用css

即可轻松实现

#circle:hover { width:100% }
#circle { width: 100px; transition:3s; }