animation d'arrêt jQuery

Méthode jQuery stop()

La méthode jQuery stop() est utilisée pour arrêter les animations ou les effets avant qu'ils ne soient terminés.

La méthode stop() fonctionne avec toutes les fonctions d'effets jQuery, y compris les diapositives, les fondus et les animations personnalisées.

Syntaxe :

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

Le paramètre facultatif stopAll spécifie si la file d'attente d'animation doit être effacée. La valeur par défaut est false, ce qui arrête uniquement les animations actives, permettant ainsi à toutes les animations en file d'attente de s'exécuter à l'envers.

Le paramètre facultatif goToEnd spécifie s'il faut terminer l'animation en cours immédiatement. La valeur par défaut est faux.

Ainsi, par défaut, stop() effacera l'animation actuelle spécifiée sur l'élément sélectionné.

L'exemple suivant montre la méthode stop() sans paramètres :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("#div1").click(function(){
                $("#div2").slideDown(5000);
            });
            $("#stop").click(function(){
                $("#div2").stop();
            });
        });
    </script>
    <style type="text/css">
        #div2,#div1
        {
            padding:5px;
            text-align:center;
            background-color:#e5eecc;
            border:solid 1px #c3c3c3;
        }
        #div2
        {
            padding:50px;
            display:none;
        }
    </style>
</head>
<body>
<button id="stop">停止滑动</button>
<div id="div1">点我向下滑动面板</div>
<div id="div2">我们必须接受失望，因为它是有限的，但千万不可失去希望，因为它是无穷的</div>
</body>
</html>

Exécutez le programme pour l'essayer

jQuery stop( ) animation (Avec paramètres)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("#start").click(function(){
                $("div").animate({left:'100px'},5000);
                $("div").animate({fontSize:'3em'},5000);
            });
            $("#stop").click(function(){
                $("div").stop();
            });
            $("#stop2").click(function(){
                $("div").stop(true);
            });
            $("#stop3").click(function(){
                $("div").stop(true,true);
            });
        });
    </script>
</head>
<body>
<button id="start">开始</button>
<button id="stop">停止</button>
<button id="stop2">停止所有</button>
<button id="stop3">停止动画，但完成动作</button>
<p>点击 "开始" 按钮开始动画。</p>
<p>点击 "停止" 按钮停止当前激活的动画，但之后我们能再动画队列中再次激活。</p>
<p>点击 "停止所有" 按钮停止当前动画，并清除动画队列，所以元素的所有动画都会停止。</p>
<p>点击 "停止动画，但完成动作" 快速完成动作，并停止它。</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>

Exécutez le programme et essayez-le

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#start").click(function(){ $("div").animate({left:'100px'},5000); $("div").animate({fontSize:'3em'},5000); }); $("#stop").click(function(){ $("div").stop(); }); $("#stop2").click(function(){ $("div").stop(true); }); $("#stop3").click(function(){ $("div").stop(true,true); }); }); </script> </head> <body> <button id="start">开始</button> <button id="stop">停止</button> <button id="stop2">停止所有</button> <button id="stop3">停止动画，但完成动作</button> <p>点击 "开始" 按钮开始动画。</p> <p>点击 "停止" 按钮停止当前激活的动画，但之后我们能再动画队列中再次激活。</p> <p>点击 "停止所有" 按钮停止当前动画，并清除动画队列，所以元素的所有动画都会停止。</p> <p>点击 "停止动画，但完成动作" 快速完成动作，并停止它。</p> <div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div> </body> </html>

soumettre Réinitialiser le code

Opération automatique