如何使用jQuery创建具有不同对象的圆形动画？

Question

如何使用jQuery创建具有不同对象的圆形动画.我试过自己,但问题是我的脚本运行不顺畅.

我希望这个有生命力,但要顺利:

努力:http: //jsfiddle.net/eT7SD/

Html代码

<div id="apDiv1"><p><img src="http://4.bp.blogspot.com/_UkDBPY_EcP4/TUr43iCI-FI/AAAAAAAADR0/o9rAgCt9d-U/s1600/1242796868203109724Number_1_in_green_rounded_square_svg_med.png"  width="200" height="115" id="img-1"/></p></div>
<div id="apDiv2"><p><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRZv4hqGcyV6OqP0hI3uAiQVwHHgPuqcTl2NppFRyvbxXLVokbs"  width="200" height="115" id="img-2"/></p></div>
<div id="apDiv3"><p><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQaplzZIaF-uTQKnvfK9N9i-Rg27F6aHtSchQZaGR-DITgO1bDwzA"  width="200" height="115" id="img-3"/></p></div>
<div id="apDiv4"><p><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQjTbe5WfEnT840gIChKfbzlVnoPPoZsyrT4zjMReym9YpsRdOFvA"  width="200" height="115" id="img-4"/></p></div>
<div id="apDiv5"><p><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRWtiMAcxGe-RQw2gRwUUiyB5aRTMeVMG5LSCPF0Qpzes-USpgyTw"  width="200" height="115" id="img-5"/></p></div>
<div id="apDiv6"><p><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTXDhOygDcNsNVsv0eIXLYdBx4C-tmedIRhFfxGlCoCfNy04YU_"  width="200" height="115" id="img-6"/></p></div>
<div id="apCenterDiv"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR42cgsKsYMWey79jT0XsTkMOyxc9oej9fVt-udxQvnVFOadpPQ"  width="200" height="115" /></div>

Css代码

<style type="text/css">
#apCenterDiv {
    position:absolute;
    width:200px;
    height:115px;
    z-index:1;
    left: 571px;
    top: 209px;
}
#apDiv1 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:2;
    left: 570px;
    top: 4px;
}
#apDiv2 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:3;
    left: 821px;
    top: 134px;
}
#apDiv3 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:4;
    left: 822px;
    top: 328px;
}
#apDiv4 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:5;
    left: 572px;
    top: 385px;
}
#apDiv5 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:6;
    left: 319px;
    top: 329px;
}
#apDiv6 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:7;
    left: 319px;
    top: 135px;
}
</style>

脚本

<script>
$(document).ready(function(e) {

      setInterval(function() {

        var imgfirstSrc = $("#img-1").attr("src");
        var imgSecSrc = $("#img-2").attr("src");
        var imgthirdSrc = $("#img-3").attr("src");
        var imgfourthSrc = $("#img-4").attr("src");
        var imgfifthSrc = $("#img-5").attr("src");
        var imgsixthSrc = $("#img-6").attr("src");


        $("#img-2").attr("src",imgfirstSrc);
        $("#img-3").attr("src",imgSecSrc);
        $("#img-4").attr("src",imgthirdSrc);
        $("#img-5").attr("src",imgfourthSrc);
        $("#img-6").attr("src",imgfifthSrc);
        $("#img-1").attr("src",imgsixthSrc);



      },1000);
});
</script>

编辑

我必须通过点击/停止事件添加更多动画.当用户点击270的红色图像位置时,他们必须更换90的位置,动画将停止; 要获得更多说明,您必须看到下面的图片.我试过@Cristi Pufu代码,但我想要更多修改

努力 http://jsfiddle.net/SaNtf/

Answer 1

使用jQuery Animation:http://jsfiddle.net/eT7SD/6/

使用math和jQuery:http://jsfiddle.net/eT7SD/7/

使用CSS3 Rotation(只是为了好玩):http://jsfiddle.net/dMnKX/

只需class在动画中添加一个"框",divs就像fiddle使用它一样js:

$(document).ready(function(e) {

    var animate = function(){

        var boxes = $('.box');

        $.each(boxes, function(idx, val){

            var coords = $(boxes[idx+1]).position() || $(boxes[0]).position();

            $(val).animate({

                "left" : coords.left,
                "top" : coords.top

            }, 1500, function(){})   

        });
    }

    animate();

    var timer = setInterval(animate, 2000);  
});

编辑:

$(document).ready(function(e) {
    var angles = [90, 45, 315, 270, 225, 135];
    var unit = 215;

    var animate = function(){

        $.each($('.box'), function(idx, val){

            var rad = angles[idx] * (Math.PI / 180);
            $(val).css({
                left: 550 + Math.cos(rad) * unit + 'px',
                top: unit * (1 - Math.sin(rad))  + 'px'
            });

            angles[idx]--;
        });

    }
    var timer = setInterval(animate, 10);

});

你必须改变left,top,width,height盒性质,规范他们,设置正确的unit(circle radius)和初始angles.但是对于预览,我认为这是你想要的(只需要更多的工作).

示例:http://jsfiddle.net/eT7SD/7/

视角理解角度: