Stopper une animation / un effet

Dans cette partie, nous verrons la méthode .stop() servant à stopper une animation ou un effet.

Méthode .stop()

API : http://api.jquery.com/stop/

$(selecteur).stop(stopAll,goToEnd)

Cette méthode prend 2 paramètres :

Stop sans paramètres

Prenons l'exemple d'un carré qu'on anime avec la méthode .animate() au clic sur le bouton Play. Si nous cliquons sur le bouton stop, l'animation en cours se stoppe grâce à la méthode .stop() sans paramètres. Au click sur play, l'animation reprend là où elle en était.

// Déclaration de l'animation
$('#play').click(function(){
    $('.pod').animate({
        left: '250px',
        width: '+=150px'
    }, 1500)
    .animate({
        opacity: '0.25',
    }, 3000);
});

// Déclaration de la méthode .stop() au click
$('#stop').click(function(){
   $('.pod').stop();
});

See the Pen .stop() by Sutterlity (@sutterlity) on CodePen.

Prenons l'exemple d'un carré qu'on modifie au survol. Dans l'exemple si dessous nous voyons qu'au survol avec de multiples passages sur le carré rose, l'animation continue le nombre de fois survolée, ce qui peut s'avérer gênant. Tandis que le carré bleu cesse son animation lorsque le survol est terminé.

// Déclaration sans .stop()
$('#a').hover(function(){
    $(this).fadeTo('slow', 0.25);
  },function(){
    $(this).fadeTo('slow', 1);
});

// Déclaration avec .stop()
$('#b').hover(function(){
    $(this).stop().fadeTo('slow', 0.25);
  },function(){
    $(this).stop().fadeTo('slow', 1);
});

See the Pen .stop() - 2 by Sutterlity (@sutterlity) on CodePen.

Stop avec les paramètres 'stopAll' et 'goToEnd'

Reprenons le cas de notre premier exemple. Agrémentons le d'un bouton permettant de stopper les animations en cours et un autre bouton permettant de les terminer toutes.

// Stopper toutes les animations en cours
$('#stopAll').click(function(){
   $('.pod').stop(true);
});

// Finir toutes les animations en cours
$('#goToEnd').click(function(){
   $('.pod').stop(true, true);
});

See the Pen .stop() - 3 by Sutterlity (@sutterlity) on CodePen.