使用 setInterval 在鼠标悬停上连续动画答案

【问题标题】：Animate continuously onMouseover using setInterval使用 setInterval 在鼠标悬停上连续动画
【发布时间】：2012-05-09 08:57:19
【问题描述】：

我已经被这个问题困扰了很长一段时间了，我在 Google 上搜索了无数个小时以提出解决方案，但无济于事。

这是我的问题

我想知道 Carousel 背后的逻辑，并希望在用户将鼠标悬停在相应按钮上时使其从右向左滑动，反之亦然。

如何让它在 mouseenter 上连续动画？

任何帮助将不胜感激。谢谢你:)

这是 JSFIDDLE： http://jsfiddle.net/neoragex/qXseV/

【问题讨论】：

标签： jquery jquery-animate setinterval

【解决方案1】：

我已经更新了你的版本，看看:) http://jsfiddle.net/qXseV/2/

我所做的是将以下内容添加到您的 .mid 类的 CSS 中：

position:absolute;
top:20px;

我将你的 setInterval 更改为：

timer = setInterval(function() {slide();}, 400);

编辑：左右移动的额外 jsfiddle http://jsfiddle.net/qXseV/7/

【讨论】：

天哪。非常感谢。如果不是太麻烦的话。你能告诉我为什么我的代码一开始就不起作用 D: 吗？您在 setInterval 函数中声明了 slide() 函数：O!~
首先，我觉得有必要添加中间的绝对位置。否则改变立场是行不通的。然后：我没有在 setInterval 中声明 slide 函数，但是我以不同的方式触发了该函数，我不确定为什么它没有像您尝试触发它那样工作。
谢谢你:)。我对 Javascript 和 jQuery 相当陌生。这是否意味着动画仅适用于绝对定位的元素？
欢迎您 :) 不，没有必要。我认为只有当你想改变他们的立场时。例如，如果您希望它们淡入或淡出，则绝对定位无关紧要。
@bjornruysen，+'d 用于快速修复，但我建议使用 position:relative; 以避免添加额外的 CSS，例如 top。

【解决方案2】：

我在your timer implementation 进行了一些调整并修复了要滑动的元素上缺少的css position:relative，因为您正在操作left value，而这反过来只能在元素有位置时使用。

HTML

<div id="leftarrow">HOVER</div>
<div class="mid"></div>

CSS

.mid {
    clear: both;
    border: 1px solid black;
    background-color: green;
    width: 100px;
    height: 100px;    
    position: relative;
}
#leftarrow {
    float: left;
    border: 1px solid black;
    margin-bottom: 4px;
    cursor: pointer;
}

JQUERY

// declare variables
var timer;
var speed = 400;

// slide function
function slide() {
    return setInterval(function() {
        $(".mid").animate({
            'left': '+=20px'
        }, 200);
    }, speed);
}

// hover event for the button
$("#leftarrow").hover(function() {
    timer = slide();
}, function() {
    clearInterval(timer);
});

见Fiddle Here!

【讨论】：

哇。感谢您指出 left 和类似的东西只能在定义的位置上进行操作。叹。我几乎以为我在第一次尝试 xD 时就拥有了它。非常感谢你^^！~。
W3C 网站为您提供了每个 CSS / HTML / SCRIPT 属性的基础知识，bookmark it ;)