Make an infinite animation jQuery

Question

I want to make an infinite animation to a div.
I succeed to make an infinite moving div but it doesn't appear as a consistent animation. The div is moving then call the function again and move again, you see can when the animation stop and when it starts again.
This is the code I did:

this.movePipesHolder = function(){
    this.pos=this.pos-10;
    parent=this;
    $('#pipesHolder').animate({"left":this.pos},function(){
        parent.movePipesHolder();
    });
}

I hope I explained myself correctly.

Answer 1

According to JQuery documentation animate() takes the following arguments:

.animate( properties [, duration ] [, easing ] [, complete ] )

The default easing is set to swing which explains the animation behaviour you are experiencing, to make the animation move at a constant pace or speed you need to set easing to linear, to set the easing argument you also need to set the duration argument (the default duration value is 400):

this.movePipesHolder = function()
{
    this.pos -= 10;
    parent = this;
    $('#pipesHolder').animate ({left: this.pos}, 400, 'linear', function()
    {
        parent.movePipesHolder();
    });
}

Heres a working example on JSFiddle.

---

Edit:

The reason easing doesn't work without setting duration:

In JQuery documentation it's no where mentioned that duration has to be set for easing to work, so i examined the jquery source code to find out what's happining. This is the animate function in the JQuery plugin v.2.1.4 script:

animate: function (prop, speed, easing, callback)
{
    var empty = jQuery.isEmptyObject (prop),
        optall = jQuery.speed (speed, easing, callback),
        doAnimation = function()
        {
            // Operate on a copy of prop so per-property easing won't be lost
            var anim = Animation (this, jQuery.extend ({}, prop), optall);
            // Empty animations, or finishing resolves immediately
            if (empty || data_priv.get (this, "finish")) anim.stop (true);
        };
        ....
};

It creates optall object by passing speed, easing and callback arguments to JQuery.speed method, the following is the JQuery.speed function as declared in the script:

jQuery.speed = function (speed, easing, fn)
{
    var opt = speed && typeof speed === "object" ? jQuery.extend ({}, speed) :
    {
        complete: fn || !fn && easing || jQuery.isFunction (speed) && speed,
        duration: speed,
        easing: fn && easing || easing && !jQuery.isFunction (easing) && easing
    };

    opt.duration = jQuery.fx.off ? 0 : typeof opt.duration === "number" ? opt.duration :
        opt.duration in jQuery.fx.speeds ? jQuery.fx.speeds[opt.duration] : jQuery.fx.speeds._default;
    ......
}

It shows that:

1. The last argument provided is always set as the callback function (unless only two arguments are provided and the second is not a function or only one argument provided, in that case callback will be set to false).
2. The second argument is always set as the speed (this will be later on validated and changed to the default value if not valid).
3. Easing will be set to the third argument only if four arguments are provided, or three arguments are provided if the third argument is not a function.

So when providing only three arguments to animate the second argument is interpreted as speed rather than easing (unless the third argument is not a function then it'll be used for easing).

However after reading the source code i realized (it's also mentioned in the documentations) that you can pass the last three arguments in an options object .animate (properties, options) and in options you can add duration, easing or complete or combination of two or all of them, for example:

$('#pipesHolder').animate ({left: this.pos}, {'easing': 'linear', 'complete': function()
{
    parent.movePipesHolder();
}});