关于jQuery animate()的问题

星辰hq 2015-08-31 03:25:34

如图，我想让a，b，c三个小圆圈各自沿着黑线同时从A处出发，同时到达B处，再同时到达C处，最后同时到达D处，中间不要有停顿，应该怎么改啊



<script src="Script/jquery-1.4.2.min.js"></script>

<script> 

    window.onload=function sssss(){

        $("#drawing1").css("top", "35px");

        $("#drawing1").css("left", "26px");



        $("#drawing2").css("top", "35px");

        $("#drawing2").css("left", "52px");



        $("#drawing3").css("top", "35px");

        $("#drawing3").css("left", "78px");



        $("#drawing1").animate({ top: '167px' }, 2000);

        $("#drawing1").animate({ left: '1147px' }, 3000);

        $("#drawing1").animate({ top: '35px' }, 2000);



        $("#drawing2").animate({ top: '142px' },  2000);

        $("#drawing2").animate({ left: '1121px' }, 3000);

        $("#drawing2").animate({ top: '35px' }, 2000);



        $("#drawing3").animate({ top: '117px' }, 2000);

        $("#drawing3").animate({ left: '1095px' }, 3000);

        $("#drawing3").animate({ top: '35px' }, 2000, sssss);

    }

</script> 

<div style="background:url(Images/test.png);height:200px;width:1180px;left:100px;position:absolute;">

    <div id="drawing1" style="background:url(Images/drawing1.png);position:absolute;width:7px;height:7px;left:26px;top:35px;"></div>

    <div id="drawing2" style="background:url(Images/drawing2.png);position:absolute;width:7px;height:7px;left:52px;top:35px;"></div>

    <div id="drawing3" style="background:url(Images/drawing3.png);position:absolute;width:7px;height:7px;left:78px;top:35px;"></div>

</div>

完整代码链接（包括图片）：http://pan.baidu.com/s/1kT5usOR

...全文

192 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

天际的海浪 2015-08-31

打赏
举报

引用 2 楼 bingle14 的回复:

[quote=引用 1 楼 apollokk 的回复:] 移动是直线的，自己算路径长度和时间，分步移动

我知道分步移动可以，但我想要它中间不要有停顿，要怎么改啊[/quote] window.onload=function sssss(){ $("#drawing1").css("top", "35px"); $("#drawing1").css("left", "26px"); $("#drawing2").css("top", "35px"); $("#drawing2").css("left", "52px"); $("#drawing3").css("top", "35px"); $("#drawing3").css("left", "78px"); $("#drawing1").animate({ top: '167px' }, 1500); $("#drawing1").animate({ left: '78px' }, 500); $("#drawing1").animate({ left: '1095px' }, 3000); $("#drawing1").animate({ left: '1147px' }, 500); $("#drawing1").animate({ top: '35px' }, 1500); $("#drawing2").animate({ top: '142px' }, 1500); $("#drawing2").animate({ left: '78px' }, 500); $("#drawing2").animate({ left: '1095px' }, 3000); $("#drawing2").animate({ left: '1121px' }, 500); $("#drawing2").animate({ top: '35px' }, 1500); $("#drawing3").animate({ top: '100px' }, 1500); $("#drawing3").animate({ top: '117px' }, 500); $("#drawing3").animate({ left: '1095px' }, 3000); $("#drawing3").animate({ top: '100px' }, 500); $("#drawing3").animate({ top: '35px' }, 1500, sssss); }