recherche

Maison  >  Article  >  interface Web  >  Explication détaillée de l'utilisation de la méthode stop de l'animation JQuery

Explication détaillée de l'utilisation de la méthode stop de l'animation JQuery

巴扎黑
巴扎黑original
2017-06-30 11:38:291459parcourir

Cet article présente principalement l'utilisation de la méthode stop de JQueryanimationanimate. Les amis dans le besoin peuvent se référer à la syntaxe

animate :
<.>

Le code est le suivant :

$(selector).animate(styles,speed,easing,callback)

Le code est le suivant :

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Testing</title> 
<link rel="stylesheet" href="css/reset.css"> 
<script src="js/jquery.js"></script> 
<style> 
.wrap { 
position
: relative; 
height
: 300px; 
width: 300px; 
border:5px solid #FCF; 
} 
.wrap p { 
position: absolute; 
left: 0;top: 0; 
height: 50px; 
width: 50px; 
background
: #FA0; 
} 
</style> 
</head> 
<body> 
<input type="button" id="btn1" value="停止当前动画"> 
<input type="button" id="btn2" value="停止所有动画"> 
<input type="button" id="btn3" value="停止所有动画，到达终点"> 
<p class="wrap"> 
<p></p> 
</p> 
<script> 
function moveX(){ 
$(&#39;.wrap p&#39;).animate({&#39;left&#39;:&#39;250px&#39;},1000).animate({&#39;left&#39;:&#39;0px&#39;},1000); 
} moveX(); 
$(&#39;#btn1&#39;).click(function(){ 
$(&#39;.wrap p&#39;).stop(); // 停止当前动画,沿路返回起点，若是返回过程中再点击，会暂停在路中 
clearInterval(); 
}) 
$(&#39;#btn2&#39;).click(function(){ 
$(&#39;.wrap p&#39;).stop(true); // 停止所有动画 去的路程中点击停止会直接到达终点，若是返回过程中再点击，会暂停在路中 
}) 
$(&#39;#btn3&#39;).click(function(){ 
$(&#39;.wrap p&#39;).stop(true,true); // 停止所有动画 ，去的路程中点击停止会直接到达终点，若是返回过程中再点击，会停止到在起点 
}) 
// .stop() // 停止当前动画 
// .stop(true) // 停止所有动画 
// .stop(true,true) // 停止所有动画，到达动画终点 
</script> 
</body> 
</html>

.stop (); // Arrêtez l'animation en cours et revenez au point de départ en cours de route. Si vous cliquez à nouveau pendant le processus de retour, elle s'arrêtera en cours de route

.stop (true); // Arrêtez toutes les animations et cliquez sur Arrêter directement en chemin, si vous cliquez à nouveau pendant le processus de retour, cela s'arrêtera en cours de route

.stop(true,true) ; // Arrêtez toutes les animations. Si vous cliquez sur stop pendant le trajet, vous atteindrez directement le point final. Si vous cliquez sur stop pendant le processus de retour, cliquez à nouveau et cela s'arrêtera au point de départ
.

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!

Déclaration：
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
Article précédent：Événements de liaison JQuery, événements de suppression et animationsArticle suivant：Événements de liaison JQuery, événements de suppression et animations

Articles Liés

Voir plus