Maison > Article > interface Web > Partagez le bug_jquery sur le déclenchement et le retard continus d'animations telles que l'animation, le glissement et le fondu dans jQuery

Partagez le bug_jquery sur le déclenchement et le retard continus d'animations telles que l'animation, le glissement et le fondu dans jQuery

WBOYoriginal: 2016-05-16 15:20:341944parcourir

Mon style d'écriture d'articles est que j'aime parler du contexte du problème et du préjudice juridique au début :

Parce que j'ai récemment voulu rappeler les options de fonctionnement, j'ai pensé à la masquer par défaut et à l'afficher lorsque la souris passe dessus.

Au début, j'avais prévu d'ajouter un class="active", qui déclencherait directement l'ajout au survol de la souris (ou la saisie de la souris), et la suppression lors de la sortie de la souris (ou du retrait de la souris). Cette solution est très simple et pratique, mais l'expérience peut ne pas fonctionner. être si bon. C'est cool (ok, j'ai utilisé ce mot, et il m'a semblé si faible instantanément), alors j'ai pensé à utiliser des animations jQuery telles que animer ou glisser, et pour être honnête au début, si vous écrivez ce plug-in. vous-même, vous rencontrerez quelques problèmes, donc ce n'est pas très facile à mettre en œuvre (après tout, ma maîtrise de js n'est pas très bonne), puis j'ai écouté mes collègues et j'ai trouvé jquery, et je l'ai juste cité directement après l'avoir importé.

(Heureusement, je n'ai pas l'habitude de chercher des plug-ins en ligne lorsque je veux faire un certain effet spécial. Quand j'en parle, je pense aussi à ce que j'ai rencontré il y a quelques jours à propos du défilement du en-tête du tableau sur l'interface. La solution a été corrigée et elle sera téléchargée dans quelques jours. Pour être honnête, j'ai cherché cette méthode sur Internet mais je n'ai pas trouvé de solution appropriée. solution moi-même, ce qui est assez satisfaisant, même si ce n'est peut-être pas la meilleure solution)

Pour en revenir au sujet, j'ai cherché sur Internet. Pour être honnête, les plug-ins d'autres personnes sont vraiment bons, et la compatibilité sous différents navigateurs a également été résolue. Cependant, personnellement, je n'utilise que deux ou trois plug-ins. -ins. La page est utilisée et le fichier doit être importé (cela ne semble pas être particulièrement gênant), et il doit être utilisé par quelqu'un d'autre. Après tout, il n'y a aucun sentiment d'accomplissement.

Ensuite, je l'ai finalement écrit moi-même. Même si cela a pris du temps et rencontré quelques problèmes, le problème a finalement été résolu. Au moins, je me suis familiarisé avec plusieurs fonctions intégrées de jQuery.

ps : Une dernière chose à ajouter, après avoir trouvé la solution moi-même, j'ai de nouveau cherché sur Baidu. Eh bien, cliquer sur le premier lien Web qui est sorti était la méthode que j'ai utilisée.

Récurrence du bug : je voulais à l'origine faire une animation, mais cela semble trop compliqué, alors écrivons le code. Ceux qui connaissent ce problème devraient savoir quel est le problème sans regarder ceux qui ne le savent pas ; problème, vous pouvez d'abord copier le code et l'essayer.

PS : Ce qui suit prend l'animation animée comme exemple

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>test</title>
<meta charset="utf-8">
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css">
<script src="./bootstrap/js/jquery-1.11/jquery.min.js"></script>
<script src="./bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div style="width:70%;margin:50px auto;height:300px;">
<div id="test" style="width:900px;height:100px;border:1px solid red;overflow:hidden;">
<div class="test" style="margin-left:-6em">
<a>
测试用的文字
<i class="fa fa-arrow-right"></i>
</a>
</div>
</div>
</div>
<script>
$("[data-toggle='tooltip']").tooltip();

$("#test").on("mouseover",function(){
var $this = $(this);
var $thisTest = $this.find("div.test");
$thisTest.css("position","relative");
// $thisTest.stop();
$thisTest.filter(':not(:animated)').animate({marginLeft:"0em"});
})
.on("mouseout",function(){
var $this = $(this);
var $thisTest = $this.find("div.test");
$thisTest.css("position","relative");
// $thisTest.stop();
$thisTest.filter(':not(:animated)').animate({marginLeft:"-6em"});
})
//连续触发动画bug
//不允许动画累积；或是在新的动画开始前，先停止当前正在进行的动画
</script>
</body>
</html>

Dans le code ci-dessus, la méthode stop() a été commentée par moi. C'est la solution la plus parfaite à mon avis. Celle qui n'a pas été commentée était une autre mentionnée par d'autres après l'avoir recherchée sur Baidu. une solution, mais personnellement, je ne pense pas que ce soit particulièrement parfait, je mentionnerai la différence plus tard.

Au début,

$thisTest.filter(':not(:animated)').animate({marginLeft:"0em"});
$thisTest.filter(':not(:animated)').animate({marginLeft:"-6em"});

Ces deux lignes de code n'ont pas de fonction filter(), ce à quoi ressemblait le code lorsque j'ai rencontré ce bug pour la première fois.

La cause de ce bug est causée par l'accumulation d'animations sur une courte période de temps (l'animation précédente n'a pas fini de jouer) (je suppose que si vous rencontrez ce problème, vous connaîtrez cette raison si vous regardez le code). Il existe donc deux solutions.

【filtre】

La première consiste à utiliser un filtre pour filtrer les éléments animés avant que l'animation ne se produise, afin que seuls les éléments dont l'animation précédente est terminée puissent déclencher de nouveaux événements.

Ensuite, cela pose un nouveau problème. Lorsque je déplace la souris sur le contenu correspondant, l'événement mouseover est déclenché. A ce moment, avant la fin de l'animation, je retire la souris en dehors de la zone de contenu correspondante. déclenché, mais comme l'animation précédente n'est pas terminée, même si l'événement est déclenché, la fonction attendue n'est pas exécutée à ce moment, le résultat attendu de « l'événement mouseleave est déclenché et le contenu est masqué » ne peut pas être obtenu.

Bien entendu, si l'opérateur maintient la souris sur le contenu correspondant avant la fin de l'animation déclenchée par l'événement mouseover, cette solution n'aura aucun impact.

【arrêter】

Quant à stop(), même si je sais que tout le monde le sait, déplaçons-le à nouveau.

//语法结构
$("#div").stop();//停止当前动画，继续下一个动画
$("#div").stop(true);//清除元素的所有动画
$("#div").stop(false, true);//让当前动画直接到达末状态 ，继续下一个动画
$("#div").stop(true, true);//清除元素的所有动画，让当前动画直接到达末状态

L'idée de cette solution est simple : lorsque je survole, l'animation correspondante se déclenche, mais avant la fin de l'animation, je veux mouseleave, et en même temps déclencher l'animation correspondant à mouseleave à ce moment-là. , je dois arrêter l'animation en cours de l'élément correspondant. Le bug n’existera alors plus.

Enfin, d'accord, cet essai ne semble pas avoir de résumé. En fait, il s'agit simplement de vous familiariser avec les fonctions d'animation d'animation, de glissement et de fondu, et en même temps de vous familiariser avec la différence entre arrêter avec et sans paramètres. paramètres (pour être honnête, il n'y avait pas de paramètre au début) J'ai pensé à utiliser stop. Un jour ou deux plus tard, quand j'ai vu l'API par hasard, j'ai vu stop, et puis j'ai soudain eu l'idée de. en utilisant stop pour résoudre ce bug).

Ce qui précède est l'éditeur de Script House qui partage avec vous les bugs concernant le déclenchement et le retard continus de l'exécution répétée d'animations, de diapositives, de fondus et d'autres animations dans jQuery. J'espère que cela sera utile à tout le monde dans votre travail futur et. étude.

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：Explication détaillée de l'utilisation de la fonction get_current_screen() dans WordPress development_javascript skillsArticle suivant：Explication détaillée de l'utilisation de la fonction get_current_screen() dans WordPress development_javascript skills

Articles Liés

Voir plus