Maison > interface Web > js tutoriel > jquery efface la file d'attente d'animation sans aucun doute

jquery efface la file d'attente d'animation sans aucun doute

巴扎黑
Libérer: 2017-06-30 11:40:03
original
1820 Les gens l'ont consulté

$(this).siblings().stop().fadeTo(200, 0.3);
jqueryanimation existe dans une file d'attente, et l'animation générée par l'événement sera mis dans une file d'attente. Lorsqu'il n'y a pas de temps pour exécuter ces files d'attente d'événements, une fois l'événement terminé, continuezl'exécution

Scénario d'application : afin d'éliminer des éléments comme " mouseover / mouseout / mouseenter / mouseleave " Le problème de "scintillement" provoqué par la file d'attente d'animation accumulée par ces événements nécessite
dans certains cas d'effacer d'abord la file d'attente d'animation précédemment accumulée, puis d'exécuter la dernière action d'animation.

Cet élément clair La commande pour la file d'attente d'animation accumulée est "stop()". Elle a deux paramètres :
Regardons d'abord l'explication de stop() par w3school, qui fait le plus autorité :

jQuery stop() 方法用于停止动画或效果,在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。show, hide, toggle并不能算动画, 实质就是css的静态效果.

$(selector).stop(stopAll,goToEnd);
最重要的是, 要真正明白它的两个参数的含义:
[可选的 stopAll ]参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
[可选的 goToEnd ]参数规定是否立即完成当前动画。默认是 false。即就停在当前状态.

因此,本来, 默认地,stop() 只是去 清除在被选元素上指定的当前动画。
Copier après la connexion
stop(isStopAll, isGoToEnd)
// 默认的参数是true, false
// stop(true, false) 清除所有的队列, 不要继续执行完当前未执行完的动画
// 清除动画队列: 不是恢复到动画执行之前的状态, 而是执行到哪里, 就停止在哪里. 
// 如果该动画设置了 **执行完毕后** 的回调函数,则不会执行该回调函数(因为动画并没有执行完毕)
// 如果使用stop()方法,则会立即停止当前正在运行的动画,

// 参数isGoToEnd:是否将当前动画效果执行到最后,意思就是, 停止当前动画的时候, 假设动画效果刚刚执行了一般,
// 这个时候想要的是 "动画执行之后的效果,那么这个参数就为true"。否则动画效果就会停在stop执行的时候

如果接下来还有动画等待执行,(这也是常常用到的情况, 要不然也不会去管stop()了)则 "以当前状态开始" 接下来的动画。
Copier après la connexion

Aucun doute sur stop() : dans le développement réel, la méthode la plus couramment utilisée est stop(true, true). Tout d'abord, effacez l'état actuel sur l' objet (l'animation actuelle doit). être effacé quels que soient les paramètres) et suivantes Toutes les files d'attente d'animation, et généralement l'exécution de l'animation en cours doivent être terminées (notez que cet achèvement de l'exécution ne nécessite pas ce processus d'exécution intermédiaire, mais passe directement à l'animation en cours animation. S'il n'y a pas de clair, il devrait atteindre l'état final ). Utilisez ensuite la dernière action d'animation. Il est rare d'utiliser la méthode stop() seule

$('ol li').mouseover(function(){
    $(this).siblings().stop(true, true).fadeTo(300, 0.3);
});
$('ol li').mouseout(function(){
    $(this).siblings().stop(true, true).fadeTo(300, 1);
});
Copier après la connexion

Dans de nombreux langages de programmation, Ici, il est dit que js jquery php prend tous en charge le style d'alignement d'écriture de code :

  • Le but est de rendre le code soigné et élégant

  • Qu'est-ce que l'élégance et la haute qualité ? Le code est appelé élégance

    L'écriture du code est aussi élégante que l'écriture de la poésie Le style d'écriture et la disposition du code du programme sont similaires au style de disposition du code. d'écrire de la poésie. Ce sont toutes des phrases longues et courtes, parfois un mot à la fois. Une parenthèse {,} occupe une ligne, donc un code bon et soigné ressemble à un poème, agréable à regarder, c'est beaucoup plus élégant que l'ordinaire ! essai en huit parties.

  • Ainsi, lorsque vous écrivez du code, vous devez

    consciemment organiser et aligner votre code et js jquery php prend également en charge cet arrangement :

  • Dans ces langues, le retour chariot équivaut à Espace équivaut à tabulation. Afin d'aligner votre code et de rendre votre code plus soigné et "élégant", vous pouvez utiliser ces trois symboles de composition "arbitrairement". ". Bien entendu, cela n'aura aucun impact sur l'exécution de votre code !

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!

Étiquettes associées:
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