jquery - 使用 setInterval 在鼠标悬停上连续动画

Question

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

这是我的问题

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

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

任何帮助将不胜感激。谢谢你 ：）

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

Answer 1

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

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

position:absolute;
top:20px;

我将您的 setInterval 更改为：

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

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

Answer 2

我对您的计时器实现进行了一些调整，并修复了要滑动的元素上缺少的 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;
}

查询

// 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);
});

看这里的小提琴！