javascript - 鼠标悬停动画奇怪的行为

Question

我正在使用 jquery 创建一个简单的动画。

当鼠标悬停在一个 div 上时，该动画向左滑动​​。

这是我的 html:

<div class="item">
    <div class="content" onmouseover="over(this)" onmouseout="out(this)">
        <div class="image">
            <img src="http://aranciamato.it/wp-content/uploads/2013/09/insetti-700x250.jpg" width="300"/>
        </div>
        <div class="text">
            Some useful content
        </div>
    </div>
</div>

这是js:

function over(element) {
    $(element).stop().animate({left: "-250"}, 500);
}

function out(element) {
    $(element).stop().animate({left: "0"}, 500);
}

这是CSS:

.item {
    position: relative;
    width: 300px;
    height: 107px;
    overflow:hidden;
}

.item .content {
    position: absolute;
    top:0;
    left:0;
    width: 600px;
    height: 107px;
}

.item .content .image {
    position:absolute;
    top: 0;
    left: 0;
}
.item .content .text{
    position:absolute;
    top: 0;
    left: 300px;
    width: 250px
}

.item {
    border: 1px solid black;
}

动画运行正常，但我注意到如果在动画运行时将光标移到 .image div 的左边框上，它会暂停片刻然后恢复。

我不知道如何更好地解释这个，所以 here you can find a JSFiddle , 和 here you can find a video that demonstrates the behaviour

我的问题是:为什么动画会这样？如何让动画不间断地继续播放？

Answer 1

改为使用 mouseenter 和 mouseleave

<div class="content" onmouseenter="over(this)" onmouseleave="out(this)">

DEMO