首先,id在单个页面中具有重复属性是无效的,因为它们必须是唯一的.这就是为什么只有第一个元素受到您的事件的影响.请改用一个班级.

<div class="test"></div>

然后在您的JS中,您可以使用公共类来停止.test元素上的所有动画,并this仅引用引发事件的动画.

$(".test").mouseenter(function () {
    $(".test").stop();
    $(this).animate({ "height": "200px" }, 200);
}).mouseleave(function () {
    $(".test").stop();
    $(this).animate({ "height": "100px" }, 200);
});

更新了小提琴

您还可以简化要使用的代码hover,这样可以消除在stop()快速悬停在元素上时偶尔导致错误对齐的需要:

$(".test").hover(
    function() { $(this).animate({ "height": "200px" }, 200); }, 
    function() { $(this).animate({ "height": "100px" }, 200); }
);

示例小提琴