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

一般来说，我对Javascript和jQuery都是新手。我有以下简单的jQuery代码片段，可以更改/设置圆的宽度：

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

$（“#圆”）.hover（函数（）{
$（this.animate（{width:“100%”），3000）
}，函数（）{
$（this.animate（{width:“100px”}，3000）
});

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

看看这是否有效

$（“#圆”）.hover（函数（）{
$（this.animate（{width:“100%”），3000）
}，函数（）{
$（this.stop（）；
$（this.animate（{width:“100px”}，3000）
});

仅使用css即可轻松实现这一点

#圆圈：悬停{宽度：100%}
#圆{宽度：100px；过渡：3s；}

这确实有效！没想到这么简单！谢谢

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