Reputation: 7097
How to create circular animation with different objects using jQuery. I have tried myself but the issue is that my scrip is not running smoothly.
I want this animate but in smooth way:
Efforts : http://jsfiddle.net/eT7SD/
Html Code
<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 Code
<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
<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>
EDIT
I have to add more animation with click/stop events. When user click the red image place of 270 they have to replace the place of 90 and animation will be stop; for more clarification you have to see the image below. I have tried @Cristi Pufu
code but I want more modification
Efforts http://jsfiddle.net/SaNtf/
Upvotes: 4
Views: 8040
Reputation: 9095
Using jQuery Animation
: http://jsfiddle.net/eT7SD/6/
Using math
and jQuery
: http://jsfiddle.net/eT7SD/7/
Using CSS3 Rotation
(just for fun): http://jsfiddle.net/dMnKX/
Just add a class
'box' to your animating divs
like in the fiddle
and use this 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);
});
EDIT:
$(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);
});
You have to change the left
, top
, width
, height
properties of boxes, standardize them, set the correct unit
(circle radius
) and initial angles
. But for a preview, i think this is what you want (just needs a little more work).
Example: http://jsfiddle.net/eT7SD/7/
Visual understanding of angles:
Upvotes: 8
Reputation: 10994
Well I tried out something, I think it could work
NOTE: this is not the complete code and only an example of how it could work
FIDDLE: http://jsfiddle.net/Spokey/eT7SD/2/
NEW FIDDLE http://jsfiddle.net/Spokey/eT7SD/3/ (6 images)
I used .position()
from jQuery to get the positions of div1 - div6
.
Then moved the image there using .animate()
.
http://api.jquery.com/position/
http://api.jquery.com/animate/
HTML
<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"/>
<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-2"/>
<div id="apDiv1"></div>
<div id="apDiv2"></div>
<div id="apDiv3"></div>
<div id="apDiv4"></div>
<div id="apDiv5"></div>
<div id="apDiv6"></div>
<div id="apCenterDiv"></div>
JavaScript
$(document).ready(function(e) {
var i = 1;
var j = 2;
setInterval(function() {
if(i===7){i=1;}
if(j===7){j=1;}
var divd = $("#apDiv"+i).position();
var divds = $("#apDiv"+j).position();
$("#img-1").stop().animate({left:(divd.left), top:(divd.top)});
$("#img-2").stop().animate({left:(divds.left), top:(divds.top)});
i++;j++;
},1000);
});
Upvotes: 1
Reputation: 14845
Just use CSS3 to rotate the image:
html
<div id='container'>
... (all your images here)
</div>
javascript:
<script type='text/javascript'>
window.myRotation=0;
$(document).ready(function(e) {
setInterval(function() {
$("#container").css("transform","rotate(" + window.myRotation + "deg)");
$("#container").css("-ms-transform","rotate(" + window.myRotation + "deg)");
$("#container").css("-webkit-transform","rotate(" + window.myRotation + "deg)");
window.myRotation +=20;
},50);
});
</script>
Upvotes: 4