Stop and complete all jQuery animations immediately

Problem:

I'd like to stop and complete all jQuery animations immediately. At one point my web app needs to progress to another stage and the smooth completion of several pending, long animations isn't needed.

Solution:

Edit: have a look at the comment below by Navigator regarding .finish() (see jQuery doc for the .finish() function). It's valid for jQuery 1.9 and above =) The points written in this post were tested for the jQuery version that was used when this post was originally written June 2012.

There are several ways to immediately stop and complete all animations that are currently running or pending in jQuery. Two of those methods will be outlined here.

One way to do this is by setting the jQuery.fx.off parameter to true, e.g.

jQuery.fx.off = true;

This will cause all queued animations to skip immediately to the final frame and complete. Note that while this parameter is set to true all animations will skip to their final states. To allow jQuery animations later on, set this parameter back to false.

The second way is more of a shotgun approach and probably isn't a good way to skip over animations in the general case. However, if you haven't been keeping track of all the selected elements that have a pending animation and thereby can't use the stop() method on them individually, you can try selecting all elements and calling the stop() function, e.g.

$("*").stop(true, true);

Note that the latter is extremely inefficient since it selects all elements on the page!

Notes:

These methods were tested on jQuery version 1.7.2 on Firefox 12.0 and the iOS 5.1 browser.

It isn't quite clear whether the jQuery.fx.off method will skip currently running animations to the final frame.

References:

• http://api.jquery.com/jQuery.fx.off/
• http://api.jquery.com/stop/

JQuery animation: execute callback only once when all completed

Problem:

When using the animate function after selecting more than one item, my callback function is executed as many times as there are items. How do I get the callback function to execute only once when the entire animation is done?

Problem Example:

If, for example, you have five items with the class 'do-something', and you try the following code:

var ctr = 0;
var selected = $(".do-something");

var mycallback = function(){
  ctr++;
  alert(ctr);
}

selected.animate({
  // ... your animation stuff ...
}, 200, mycallback);

Rather than the hoped for single alert with the number 1, you'll receive five alerts with the numbers 1 through 5.

Solution:

As of JQuery version 1.6 you can use the promise() and done() functions to fire off your callback once after all the animations are completed.

For example, again if you have five items with the class 'do-something' the following code should now produce a single alert with the number 1:

var ctr = 0;
var selected = $(".do-something");

var mycallback = function(){
  ctr++;
  alert(ctr);
}

selected.animate({
  // ... your animation stuff ...
}, 200);

selected.promise().done(mycallback);

Other notes:

This was tested to work using JQuery 1.7.2 and Firefox 12.0.

References:

• http://api.jquery.com/promise/#example-1
• http://api.jquery.com/deferred.done/
• http://api.jquery.com/promise/

Web script measuring sizes of images or divs breaks the first time, but not the rest with Javascript or JQuery

Problem:

A script that uses the width or height function to measure a loaded div or an image seems to break the first time the page is loaded, but not any subsequent times.

Possible diagnosis:

There are actually two problems in the above situation. The first problem is that the bug seemingly cannot be reproduced. The second problem is that the script will break for any users seeing the containing page for the first time.

One situation where this can occur is because the script is run by the browser prior to an image being loaded. For instance, the following example script can have this error occur:

$(document).ready(function(){
var divWidth = $("#mydivwithanimage").width();
doSomethingImportantWithWidth(divWidth);
});

The reason this script fails is because even though JQuery waits until the DOM is loaded prior to executing this script, this doesn't necessarily mean that other page components being loaded, such as images, have completed loading before this script is run. This leads to the funny problem that the script will only fail the first time it is run in an open browser, as the browser will cache all loaded images and other page components and often load them before the script is run when the page is reloaded.

Solution (for debugging):

The solution to reproducing this error while debugging is to clear all browser caches (javascript variables as well as loaded components) prior to re-running the script. In Firefox, you can simply clear your cache prior to completely quitting your browser. This should work with most other browsers, too. After re-launching the browser, the bug should appear once again.

Solution:

To correct the script, you need to ensure that it is run after all page components, such as images, are loaded, and not simply just the DOM. If you are using JQuery, rather than using $(document).ready(), use $(window).load(), e.g.

$(window).load(function(){
// ... your stuff here ...
});

For regular javascript, you can use the 'complete' property, e.g.

var myImage = new Image();
myImage.src = "img/myimage.png";

// ... later on ...
if(myImage.complete){
// ... do stuff ...
}

jquery .val() after key pressed

When entering data into a text input (for purposes such as auto-suggest), the following example code seems to always be one step behind, in other words .val() is called too early, i.e. seemingly before the keystroke is done:

$("#some-form-text-input").live("keypress", function(e){

  alert($("#some-form-text-input").val());

});


An example of why this is undesirable is: if the text field already contained the string "somethin" and "g" is typed next, the alert in the callback would only display "somethin" versus the desired "something".

Solution: use the "keyup" rather than the "keypress" event

E.g.

$("#some-form-text-input").live("keyup", function(e){

  alert($("#some-form-text-input").val());

});


This waits until the latest pressed key is lifted before firing the callback.