Geek Answers Handbook

Make endless jQuery animation

I want to make endless animation for a div.
I managed to create an infinite moving div, but it does not look like a sequential animation. The div moves, then calls the function again and moves again, you can see when the animation stops and when it starts again.
This is the code I made:

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

I hope I have correctly explained.

+6
source share
1 answer

According to the jQuery documentation, animate () takes the following arguments:

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

The default fix is ​​set to swing , which explains the behavior of the animation you experience, so that the animation moves at a constant speed or speed, to set the attenuation to linear , to set the attenuation argument, which 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(); }); }

Here is an example of a JSFiddle .

Edit:

Eliminating the cause does not work without setting the duration:

There is no mention in the jQuery documentation that duration should be set to make work easier, so I studied the jquery source code to find out what was going on. This is the animate function in the jQuery v.2.1.4 script plugin:

 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 an optall object, passing the speed , easing and callback arguments to the JQuery.speed method, the following JQuery.speed function, as specified 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; ...... }

This shows that:

  • The last argument is always set as a callback function (if only two arguments are not provided and the second is not a function or only one argument is provided, then the callback will be set to false).
  • The second argument is always set as speed (this will be checked later and changed to the default value if it is not valid).
  • The 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.

Thus, when providing only three animate arguments animate second argument is interpreted as speed , not easing (unless the third argument is a function, it will be used for easing ).

However, after reading the source code that I understood (it is also mentioned in the documents), you can pass the last three arguments in the options .animate (properties, options) object and in the parameters you can add duration , easing or complete or a combination of two or all of them, for example:

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

More articles:


All Articles