jquery arrêter d'animer

jQuery est une bibliothèque JavaScript largement utilisée dans le développement Web. Sa fonction d'animation flexible peut améliorer efficacement l'expérience utilisateur du site Web. Dans le développement réel, de nombreux développeurs ont rencontré des situations dans lesquelles ils doivent arrêter l'exécution de l'animation. Cet article explique comment arrêter l'effet d'animation de jQuery.

1. Utilisez la méthode stop()

jQuery fournit une méthode stop(), qui peut être utilisée pour arrêter l'effet d'animation en cours. La syntaxe de cette méthode est la suivante :

$(selector).stop(stopAll, gotoEnd);

Parmi eux, selector est l'élément à animer ; stopAll est un paramètre facultatif utilisé pour spécifier s'il faut arrêter tous les effets d'animation en cours (la valeur par défaut est false, ce qui signifie uniquement arrêter l'animation). animation actuelle) ; gotoEnd est un autre paramètre facultatif, utilisé pour spécifier où arrêter l'effet d'animation (la valeur par défaut est false, ce qui signifie s'arrêter à la position actuelle).

Voici un exemple simple qui montre comment arrêter une animation en cours :

$(document).ready(function(){
    $("button").click(function(){
        $("#box").animate({left: '250px'}, 5000);
    });
    $("#stop").click(function(){
        $("#box").stop();
    });
});

Dans cet exemple, lorsque l'utilisateur clique sur le bouton, un élément avec l'identifiant "box" sera déplacé vers la gauche pendant 5 secondes. Lorsque l'utilisateur clique sur l'élément portant l'identifiant "stop", l'animation sera arrêtée.

2. Utilisez la méthode clearQueue()

En plus de la méthode stop(), jQuery fournit également une méthode clearQueue() pour vider la file d'attente sur l'élément. Normalement, lorsqu'un effet d'animation est arrêté, toutes les animations de la file d'attente sont effacées. Cependant, si vous ne souhaitez pas arrêter l'animation en cours, mais que vous souhaitez effacer d'autres effets d'animation, alors la méthode clearQueue() sera très utile.

La syntaxe de cette méthode est la suivante :

$(selector).clearQueue(queueName);

Parmi eux, queueName est un paramètre facultatif utilisé pour spécifier le nom de la file d'attente à vider. Si ce paramètre n'est pas spécifié, tous les effets d'animation de la file d'attente par défaut seront effacés.

Voici un exemple qui montre comment effacer d'autres effets d'animation à l'exception de l'animation en cours lors de l'arrêt de l'animation :

$(document).ready(function(){
    $("button").click(function(){
        $("#box").animate({left: '250px'}, 5000);
        $("#box").animate({top: '100px'}, 5000);
    });
    $("#stop").click(function(){
        $("#box").stop(false, true).clearQueue();
    });
});

Dans cet exemple, lorsque l'utilisateur clique sur le bouton, un élément avec l'identifiant "box" sera un effet d'animation qui se déplace d'abord vers la gauche puis vers le bas. Lorsque l'utilisateur clique sur l'élément portant l'identifiant "stop", l'animation du mouvement vers le bas sera arrêtée, mais l'effet d'animation du mouvement vers la gauche sera conservé. Dans le même temps, d'autres effets d'animation sont également supprimés.

Résumé :

Si vous souhaitez arrêter l'effet d'animation en cours, vous pouvez utiliser la méthode stop() ; si vous souhaitez effacer d'autres effets d'animation dans la file d'attente lors de l'arrêt de l'animation, vous pouvez utiliser la méthode clearQueue(). Dans le développement réel, choisissez différentes méthodes selon vos besoins pour atteindre vos objectifs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!