Question

关于jQuery animate()的问题

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

<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

Answer 1

把时间和动画分割一下, 或许就可以做到你要的效果, 代码如下

window.onload=sssss;
function sssss(){
    $("#drawing1").css({top:"35px",left:"26px"});
    $("#drawing2").css({top:"35px",left:"52px"});
    $("#drawing3").css({top:"35px",left:"78px"});
    var t1 = 1500,t2=500,t3=3000,t4=500,t5=1500;
    $("#drawing1")
            .animate({ top: '167px'}, t1)
            .animate({left:"78px"},t2)
            .animate({ left: '1095px' }, t3)
            .animate({ left: '1147px' }, t4)
            .animate({ top: '35px' }, t5);
    $("#drawing2")
            .animate({ top: '142px'}, t1)
            .animate({left:"78px"},t2)
            .animate({ left: '1095px' }, t3)
            .animate({ left: '1121px' }, t4)
            .animate({ top: '35px' }, t5);
    $("#drawing3")
            .animate({ top: '117px' }, t1+t2)
            .animate({ left: '1095px' }, t3)
            .animate({ top: '35px' }, t4+t5, sssss);
}

这里只贴出了js代码, 其他代码没有变, 你可以测试一下效果

追问

中间还是有停顿一下，能不能让它中间不要有停顿，连贯一点啊

追答

那个应该不是停顿, 只是速度比较慢吧, 因为JQuery的动画是有缓动的, 每段动画开始和结束比较慢, 中间比较看, 你可以加一个参数, 做成直线型的试一下, 加个"linear"

    $("#drawing3")
            .animate({ top: '117px' }, t1+t2,"linear")
            .animate({ left: '1095px' }, t3,"linear")
            .animate({ top: '35px' }, t4+t5,"linear");
    $("#drawing2")
            .animate({ top: '142px'}, t1,"linear")
            .animate({left:"78px"},t2,"linear")
            .animate({ left: '1095px' }, t3,"linear")
            .animate({ left: '1121px' }, t4,"linear")
            .animate({ top: '35px' }, t5,"linear");
    $("#drawing1")
            .animate({ top: '167px'}, t1,"linear")
            .animate({left:"78px"},t2,"linear")
            .animate({ left: '1095px' }, t3,"linear")
            .animate({ left: '1147px' }, t4,"linear")
            .animate({ top: '35px' }, t5,"linear", sssss);