鼠标悬停动画奇怪的行为答案

【问题标题】：mouseover animation weird behaviour鼠标悬停动画奇怪的行为
【发布时间】：2014-06-30 22:31:13
【问题描述】：

我正在用 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

我的问题是：为什么动画会这样？如何让动画继续播放而不暂停？

【问题讨论】：

不确定是否能解决您的问题，但听起来您应该改用 onmouseenter/mouseleave 事件：jsfiddle.net/kWbJ7/1 但最好只在 CSS 中设置动画
@A.Wolff 我的意思是它发生了这样的事情：videobam.com/APmeU 无论如何，你和安东的回答都对我有用，谢谢！
感谢视频，现在我明白你的意思了
@A.Wolff 也许我应该把它附加到这个问题上，我不是英语，我不知道如何用语言解释这种行为
你的英文好像比我的好... ;) 你解释得很好，我只是不确定

标签： javascript jquery html css animation

【解决方案1】：

改用 mouseenter 和 mouseleave

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

DEMO

【讨论】：

谢谢，这行得通！只要我接受这个答案，我就会接受它

【解决方案2】：

您的 jsfiddle 正在为我工作。另外，最好使用 jQuery 提供的$(el).hover() 函数，例如：

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

【讨论】：

您是否尝试在动画运行时移动光标？你应该得到这样的东西：videobam.com/APmeU。安东回答对我有用
奇怪，我不明白。它对我来说很好。很高兴你解决了！
@BackSlash hover 是onmouseenter/mouseleave 的简写，它与安东的答案相同。但是当然你需要从 DOM 元素中删除内联事件声明

【解决方案3】：

好吧，您可以在父元素（在本例中为 .item）上使用悬停事件并为子元素 (.content) 设置动画。如果您使用 jQuery，只需使用 .hover () 代替这两个鼠标事件。

【讨论】：

【解决方案4】：

当您将光标移出图像div 时，将触发mouseout 事件- 您移出图像- 并调用out 函数，使动画停止。紧接着，mouseover 事件触发 - 你在文本上移动 - 并调用 over 函数。

您将事件处理程序附加到 content div，即，只要事件对其自身触发，而且当事件对其后代之一触发时，它们都会被调用。

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

【讨论】：