Question

我正在尝试构建一些悬停按钮，在悬停时移动DIV盒。我正在使用鼠标，但这只会使DIV盒移动一次，而我希望只要按钮悬停就继续移动。

这可能吗？

这是代码：

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js">    </script>
<title>jQuery tests</title>
<style type="text/css">
    .div1{
        position: absolute;
        border-style: solid;
        border-radius: 7px;
        top:50px;
        width: 75px;
        height: 75px;
        z-index: -1;
    }
    .but{
        border-style: dashed;
        padding: 2px;
        margin:2px;
        width: 50px;
        text-align: center;
    }
</style>
</head>
<body>
<div style="width:310; align:center;">
    <div class="but" id="up">Up</div>
    <div class="but" id="left" style="float:left;">Left</div>
    <div class="but" id="right" style="float:left;">Right</div>
    <div class="but" id="down">Down</div>
    <div class="div1"></div>
</div>
<script>

        $('#left').on('mouseover', function(){
                $('.div1').animate({'left':'-=50'},100);
        });
        $('#right').on('mouseover', function(){
                $('.div1').animate({'left':'+=50'},100);
        });
        $('#up').on('mouseover', function(){
                $('.div1').animate({'top':'-=50'},100);
        });
        $('#down').on('mouseover', function(){
                $('.div1').animate({'top':'+=50'},100);
        });

</script>

</body>
</html>

Answer 1

使用setInterval来执行此操作！

这是一个jsFiddle正确的悬停：

http://jsfiddle.net/vN2da/

请注意，您需要设置mouseleave事件以清除间隔。

##编辑##

我已经更新了jsFiddle以便在所有方向上进行：

http://jsfiddle.net/vN2da/1/

我希望这对你有用。

Answer 2

在动画上使用函数并在动画完成后绑定相同的函数。

var anim = true;
function animateAll(dir, ln, speed)
{
    if(anim)
    {
        var opt = {};
        opt[dir] = ln;
        $('.div1').animate(opt, speed, function(){
               animateAll(dir,ln, speed)
        });
    }
}

$('#left').mouseover(function() {
    anim=true;
    animateAll('left','-=50px', 100);
});
$('#top').mouseover(function() {
    anim=true;
    animateAll('top','-=50px', 100);
});
$('#right').mouseover(function() {
    anim=true;
    animateAll('left','+=50px', 100);
});
$('#down').mouseover(function() {
    anim=true;
    animateAll('top','+=50px', 100);
});
$('#left, #top, #right, #down').mouseout(function() {
    anim = false;
});

我对所有方面的新解决方案..

查看this - Fiddle

如何在jQuery中继续进行鼠标悬停操作

2 个答案: