关于JS动画无限循环问题~~求大神帮忙看下

发布于
2016-01-03

想简单的实现一个JS动画无限循环~不过设置了定时器好像没用~~不知道咋整了~求大神帮忙看下~非常感谢~
<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<title></title>
<script src="jquery.js"></script>

</head>

<body>

<div style="width: 30px;height: 30px;
    background-color: pink;position: absolute;"></div>
<script>
  function donghua(){
                $("div").animate({
                top:150,
                left:1000
            },1000)};
            donghua();

//这里设置了定时器想使流星滑动效果无限循环！可就是不好使，没效果~跪求解决方法~~

            var timer=setInterval(donghua,1000);
</script>

</body>

javascript html

阅读 8.3k

7 个回答

AngryDragon

✓ 已被采纳

写了个sample，替换下jquery引用应该就可以看到效果，在donghua()的回调函数里把位置值重置。
animate()写多个值{top:"300px",left:"300px"}
css()写多个值{"top":"10px","left":"10px"}

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        div{width: 30px;height: 30px; background-color: pink;position: absolute;top:0;left:0;}
    </style>
    <script src="jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
    var timer=setInterval(donghua,1000);
    function donghua(){
        $("div").animate({top:"300px",left:"300px"},1000,function(){
            $("div").css({"top":0,"left":0});
        });
    }
    </script>
</head>
<body>
    <div></div>
</body>
</html>

kikong

19.1k21320

发布于
2016-01-03

<script>
    function donghua(){
        $("div").animate({
            top:150,
            left:1000
        },1000)};
    donghua();
    var timer=setInterval(donghua,1000);
</script>

donghua();执行完后，div元素已经移动到指定位置了，那么下次执行动画就会从 top:150,left:1000的位置开始移动，你说是个什么效果呢~~~

tryzf

55321730

发布于
2016-01-03

没加单位吧？

Nana_Morse

783135

发布于
2016-01-03

更新于
2016-01-03

        function donghua(){
            var $div = $("div"),
                startTop = $div.css("top"),
                startLeft = $div.css("left");
            $div.animate({
                top:150,
                left:1000
            }, 1000, null, function(){
                $div.css({
                    "top" : startTop,
                    "left" : startLeft
                });
                donghua();
            });
        }
        donghua();

这样试试看？

已注销

981110

发布于
2016-01-04

第一次动画后，你的元素没回去。

yellowlemon

1.1k2512

发布于
2016-01-04

动画到达指定位置后，你没有设置元素回到指定位置，donghua方法中应该像下面这样在动画结束后让元素回到初始位置

function donghua(){
    $("div").animate({
        top:150,
        left:1000
    }, 1000, function(){
        $("div").css({
            "top" :初始top值,
            "left" : 初始left值,
        });
    });
}