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

Answer 2

你的jsfiddle正在为我工作。此外，它更适合您使用jQuery提供的$(el).hover()函数，例如：

$('.content').hover(function() {
    // Mouseover
}, function() {
    // Mouseout
});

Answer 3

好吧，您可以在父元素（在本例中为.item）上使用悬停事件，并为子元素（.content）设置动画。如果你正在使用jQuery，只需使用.hover（）而不是那两个鼠标事件。

Answer 4

当您将光标移出图像div，然后mouseout事件触发 - 您移出图像 - 并调用out函数，使动画停止。在此之后mouseover事件触发 - 您移动文本 - 并调用over函数。

您将事件处理程序附加到content div，即每当事件触发时都会调用它们，但是当事件触发其中一个后代时也会调用它们。

它与mousenter和mouseleave一起使用的原因是浏览器对这些事件的处理方式不同。但请注意，并非所有浏览器都支持它们。

鼠标悬停动画奇怪的行为

4 个答案: