CODEWITHSUNDEEP
jqueryjquery-animatesetintervalsmoothingmotion
a clever name
a clever name

Reputation: 478

jQuery animation more smoother?

problem evolves around

  1. this random floating script allows only to make step movement as first to the left and then to the top, but in perfect it would be between the two
  2. it is not smooth enought

I tried with easing plugin aslo

code is here:

function ran(min, max)
{
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
function moveIt()
{
    $(".circle").each(function() {
        x = ran(-3, 3);
        y = ran(-3, 3);
        pos = $(this).position();
        nowX = pos.left + x;
        nowY = pos.top + y;
        $(this).animate({"left": nowX}, {queue:false, duration:400, easing: 'linear'});
        $(this).animate({"top":  nowY}, {queue:false, duration:400, easing: 'linear'});
    });
}
setInterval(moveIt, 400);

Upvotes: 0

Views: 2104

Answers (1)

Quincy
Quincy

Reputation: 4433

Updated your function with below.

1) Merge your 2 animate() invocation into 1

2) Replace the setInterval() using animate()'s own success callback to invoke recursively.

3) Replace the setInterval() using delay() method.

4) Try to 'smoothen' the animation by decreasing the delay between each loop. (Which was 400 set by you)

http://jsfiddle.net/6kxts/

Upvotes: 2

Related Questions