Here i am trying to make an image move in a circular path but it is not moving in a circular path..I have tried like this Moving a picture around slowly
CSS
#friends { position: absolute; }
Markup
<img src="http://jsfiddle.net/img/logo.png"
id="friends"/>
JS
function moveit() {
var newTop = Math.floor(Math.random()*350);
var newLeft = Math.floor(Math.random()*1024);
var newDuration = Math.floor(Math.random()*5000);
$('#friends').animate({
top: newTop,
left: newLeft,
}, newDuration, function() {
moveit();
});
}
$(document).ready(function() {
moveit();
});
Live demo: http://jsfiddle.net/W69s6/embedded/result/
Any Suggestion??
Another variant (based on Div Moving in cycle rotation using Javascript):
var t = 0;
function moveit() {
t += 0.05;
var r = 100; // radius
var xcenter = 100; // center X position
var ycenter = 100; // center Y position
var newLeft = Math.floor(xcenter + (r * Math.cos(t)));
var newTop = Math.floor(ycenter + (r * Math.sin(t)));
$('#friends').animate({
top: newTop,
left: newLeft,
}, 1, function() {
moveit();
});
}
$(document).ready(function() {
moveit();
});
DEMO: http://jsfiddle.net/W69s6/20/
Try this using Animate:
function animateCircle(id, speed, radius, startx, starty, phi) {
if (!phi) { phi = 0 };
var int = 2 * (Math.PI) / speed;
phi = (phi >= 2 * (Math.PI)) ? 0 : (phi + int);
var $m = startx - radius * Math.cos(phi);
var $n = starty - radius * Math.sin(phi);
$("#friends").animate({
marginLeft: $m + 'px',
marginTop: $n + 'px'
}, 1, function() {
animateCircle.call(this, id, speed, radius, startx, starty, phi)
}
);
};
You can call the function for any div
like this:
animateCircle('#friends', 100, 100, 400, 250);
DEMO: http://jsfiddle.net/W69s6/18/
DEMO 2: http://jsfiddle.net/W69s6/34/
Adapted from here.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With