Namespaces for animations in jQuery

Navigation
3

For those of you already familiar with using jQuery, using the jQuery.fn.stop function is a simple and common thing when working with different animations on a common element.

My question is about creating jQuery extensions. I have already developed jQuery plugins for some time and to develop any extensions I use an own standard based on an international standard created by Addy Osmani where I made some changes.

This standard is for the developer to use a plugin, do not go through some problems that could occur in several different situations and browsers or even to avoid certain types of conflicts with names of variables, functions and events, among others.

When a user uses the jQuery.fn.off function, for example, it removes a chain of delegated events with jQuery functions ( jQuery.fn.on for example). In case the user needs to remove only the events delegated by a specific plugin, the correct one in a pattern would be to use a namespace as in the example below: 

jQuery(document).on('click.customNamespace', jQuery.noop);

So the developer could remove only the events that the plugin delegated with something close to it: 

jQuery(document).off('.customNamespace');

My question is about doing something similar, but with jQuery animations.

Suppose I have a plugin that moves through an animation the vertical and horizontal scroll bars of an element in the DOM. When the user triggers an undetermined event I want to for example stop the animation only vertically while the horizontal scrolling continues to move. The use of jQuery.fn.stop does not help me in this question since it stops all animations of the element (at least not in a way that I know).

The question then would be: How can I stop only certain animation or part of an animation? How to stop scrollTop only and continue with the scrollLeft animation announced in the same instance of the jQuery.fn.animate function? And if this is possible in some way that I do not know, it would be possible to create a kind of namespace for this as I exemplified with events above (Something like jQuery(document).stop('.myNamespace') )?

I do not know if I have complicated a question that maybe has an easy resolution for someone or if it was clear enough, but in case of doubts, I keep an eye on the comments.

    
asked by anonymous 12.03.2014 / 14:04

2 answers

2

You can do independent animations for both attributes and plugins using queues of jQuery effects functions, such as animate() and stop() .

By specifying a queue in the animation options, the animations will be queued independently of each other.

For example: 

$('div').animate(
    //define o atributo para animar, movendo o objeto 200 pixels para a direita
    {
        left: '+=200px'
    }, 
    //define as opções, incluindo a fila da animação
    {
        queue: 'x',
        duration: 5000
    }
).dequeue('x'); //inicia a animação

As the documentation says, when a queue is specified, the animation does not start immediately, so it is always necessary to call the dequeue() function. This can lead to changes in existing code and make the implementation a little harder.

To specifically break the animation above, we pass the queue name to the function stop() : 

$('div').stop('x');

If we do the same for the Y axis, we can start and stop the animations independently.

However, it is not possible to stop the animation of a single attribute if animate() was done with multiple attributes.

View the demo on jsfiddle

    
12.03.2014 / 14:42
2

I found something in SOEN that might be a solution to this question:

Stopping specific jQuery animations

According to the response it is possible to call the animate method by passing the queue: false parameter, and then use the current property value to be stopped with an animation runtime of 0. Thus, the animation will stop for the desired property.

Example Transcribed Question in English 

$myElement = $("#animateElement");
$myElement.animate({width: 500}, {duration: 5000});
$myElement.animate({height: 500}, {duration: 5000, queue: false});
// ... Esperar 2 segundos ...
$myElement.animate({width: $myElement.width()}, {duration: 0, queue: false});

The last line will stop the animation of the width property.

EDIT Reading a little more the answers to this question, here I think, an answer with 0 votes, stating that jQuery 1.7+ supports named animation queues, and that can be stopped individually by the stop method:

Example 

$myElement.animate({width: $myElement.width()}, {queue: "minhaQueue"});
$myElement.stop("minhaQueue");
    
12.03.2014 / 14:12
PDO suppresses columns with equal names Select a checkbox and do not sort the dataTables