3

Para quem já está habituado com o uso da jQuery, utilizar a função jQuery.fn.stop é algo simples e bem comum quando trabalhamos com diferentes animações em um elemento em comum.

Minha duvida está voltada para a criação de extenções jQuery. Eu já desenvolvo plugins jQuery a algum tempo e para desenvolver qualquer extenção eu utilizo um padrão próprio baseado em um padrão internacional criado pelo Addy Osmani onde fiz algumas alterações.

Este padrão serve para que o desenvolvedor que utilize um plugin, não passe por alguns problemas que poderiam ocorrer em diversas situações e browser diferentes ou mesmo para evitar certos tipos de conflitos com nomes de variáveis, funções e eventos entre outros.

Quando um usuário usa a função jQuery.fn.off por exemplo, ele remove uma cadeia de eventos delegados com as funções jQuery (jQuery.fn.on por exemplo). Para o caso de o usuário precisar remover apenas os eventos delegados por um plugin em especifico, o correto em um padrão seria utilizar um namespace como no exemplo abaixo:

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

Assim o desenvolvedor poderia remover apenas os eventos que o plugin delegou com algo próximo disto:

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

Minha duvida é em relação a realizar algo parecido, porém com animações jQuery.

Suponha que eu tenho um plugin que move através de uma animação as barras de rolagem vertical e horizontal de um elemento no DOM. Quando o usuário disparar um evento indeterminado eu quero por exemplo parar a animação apenas verticalmente enquanto a rolagem horizontal continua a se mover. O uso de jQuery.fn.stop não me ajuda nesta questão ja que ele para todas as animações do elemento (pelo menos não de uma forma que eu conheça).

A pergunta então seria: Como posso parar apenas determinada animação ou parte de uma animação? Como parar apenas "scrollTop" e continuar continuar com a animação de "scrollLeft" anunciada em uma mesma instância da função jQuery.fn.animate? E se isso for possível de alguma forma que desconheço, seria possível criar uma espécie de namespace para isso assim como exemplifiquei com eventos acima (Algo como jQuery(document).stop('.myNamespace'))?

Não sei se compliquei muito uma questão que talvez tenha resolução fácil para alguém ou se fui claro o suficiente, mas em caso de duvidadas estou de olho nos comentários.

2 Respostas 2

2

É possível fazer animações independentes tanto por atributos quando por plugins usando as queues das funções de efeitos do jQuery, como animate() e stop().

Especificando nas opções da animação uma fila, as animações serão enfileiradas independentemente umas das outras.

Por exemplo:

$('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

Conforme diz a documentação, quando uma fila é especificada, a animação não começa imediatamente, então é necessário sempre chamar a função dequeue(). Isso pode gerar alterações em código já existente e tornar um pouco mais trabalhosa a implementação.

Para interromper especificamente a animação acima, passamos o nome da fila para a função stop():

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

Se fizermos o mesmo para o eixo Y, poderemos iniciar e parar as animações independentemente.

Entretanto, não é possível parar a animação de um único atributo se o animate() foi feito com vários atributos.

Veja o demo no jsfiddle

1
  • 1
    Instanciar uma animação para cada propriedade parece uma solução melhor, embora creio que haja perca no desempenho. Realmente uma pena não haver uma forma específica de parar apenas uma propriedade entre varias de uma mesma animação. Quem sabe crio uma issue no repositório da jQuery para discutir sobre essa possibilidade em uma versão futura... Muito obrigado! Commented 12/03/2014 às 14:06
2

Achei algo no SOEN que pode ser uma solução para esta pergunta:

Stopping specific jQuery animations

Segundo a resposta é possível chamar o método animate passando o parâmetro queue: false, e então usar o valor corrente da propriedade a ser parada com um tempo de execução da animação de 0. Assim, sendo a animação vai parar para a propriedade desejada.

Exemplo transcrevido da pergunta em inglês

$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});

A última linha irá parar a animação da propriedade width.

EDIT Lendo um pouco mais as respostas da dita pergunta, eis que acho, uma resposta com 0 votos, informando que o jQuery 1.7+ suporta filas da animação nomeadas (named animation queues), e que podem ser paradas individualmente pelo método stop:

Exemplo

$myElement.animate({width: $myElement.width()}, {queue: "minhaQueue"});
$myElement.stop("minhaQueue");
1
  • Muito interessante, eu já havia trabalhado com filas de animações mas desconhecia essa funcionalidade. Só não achei que se aplique em uma boa prática o exemplo que você encontrou sobre instanciar uma nova animação com duração 0 embora seja uma boa saida caso não haja nenhuma outra forma de fazer isso. Muito obrigado! Commented 12/03/2014 às 13:36

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .