Question

我一直坚持这个问题已经有一段时间了，我已经在Google上搜索了无数个小时来提出解决方案，但无济于事。

这是我的问题

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

如何在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);

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

的额外jsfiddle

Answer 2

我在your timer implementation进行了一些调整，并修复了要滑动的元素上缺少的css position:relative，因为您正在操纵left value，而Fiddle Here!只能用于{{3}}元素有一个位置。

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

请参阅{{3}}

使用setInterval在onMouseover上连续动画

2 个答案: