0

我正在尝试构建一些在悬停时移动 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>
4

2 回答 2

0

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

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

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

看看这个 - 小提琴

于 2013-07-15T14:43:03.170 回答
0

用来setInterval做！

这是一个 jsFiddle 在右悬停时执行此操作：

http://jsfiddle.net/vN2da/

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

＃＃ 编辑 ＃＃

我已经更新了 jsFiddle 以在各个方向上执行此操作：

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

我希望这对你有用。

于 2013-07-15T14:42:18.603 回答