Maison > interface Web > Questions et réponses frontales > jquery arrêter d'animer

jquery arrêter d'animer

WBOY
Libérer: 2023-05-18 17:31:40
original
1658 Les gens l'ont consulté

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);
Copier après la connexion

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();
    });
});
Copier après la connexion

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);
Copier après la connexion

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();
    });
});
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal