Javascript Girl
  1. Javascript Girl
  3. Jquery animation continue sur mouseover
Intereting Posts
Échangez deux objets en JavaScript Comment surveiller l'événement de changement de sélection de fenêtre en javascript Validation côté serveur, comment passer des erreurs à voir dans MVC? Pourquoi les axes sur la mise à jour de ma figure D3 SVG ne seront-ils pas mis? AngularJS: Utilisation du service partagé (avec $ resource) pour partager des données entre les contrôleurs, mais comment définir les fonctions de rappel? Location.host vs location.hostname et compatibilité entre navigateurs? Différence entre "process.stdout.write" et "console.log" dans node.js? Détermination de la ligne source et du fichier de référence de la fonction – Comment Firebug le fait-il? Rechargement efficace des données / transmission des données du serveur au client Javascript assignant la valeur de retour d'une fonction Callback à la variable globale Html2Canvas Redimensionner Rechercher un texte avec javascript dans une classe div Native javascript equivalent of jQuery: contient () sélecteur Quel est le comportement Object.prototype du JavaScript? Les caractères spéciaux ne sont pas lus à partir d'un fichier JSONP correctement dans IE8

Jquery animation continue sur mouseover

J'essaie de faire fonctionner une animation uniquement lorsque la souris est sur un objet. Je peux obtenir une itération de l'animation, puis la régler à la normale sur la souris. Mais j'aimerais que l'animation boucle sur mouseover. Comment le faire, en utilisant setInterval? Je suis un peu coincé.

Cela pourrait se faire comme suit: 

$.fn.loopingAnimation = function(props, dur, eas) { if (this.data('loop') == true) { this.animate( props, dur, eas, function() { if( $(this).data('loop') == true ) $(this).loopingAnimation(props, dur, eas); }); } return this; // Don't break the chain }

Maintenant, vous pouvez le faire: 

 $("div.animate").hover(function(){ $(this).data('loop', true).stop().loopingAnimation({ left: "+10px"}, 300); }, function(){ $(this).data('loop', false); // Now our animation will stop after fully completing its last cycle });

Si vous vouliez que l'animation s'arrête immédiatement , vous pouvez changer la ligne hoverOut pour lire: 

 $(this).data('loop', false).stop();

setInterval renvoie un identifiant qui peut être transmis à clearInterval pour désactiver la minuterie.

Vous pouvez écrire ce qui suit: 

 var timerId; $(something).hover( function() { timerId = setInterval(function() { ... }, 100); }, function() { clearInterval(timerId); } );

J'avais besoin de cela pour travailler plus d'un objet sur la page, donc j'ai modifié un petit code de Cletus: 

 var over = false; $(function() { $("#hovered-item").hover(function() { $(this).css("position", "relative"); over = true; swinger = this; grow_anim(); }, function() { over = false; }); }); function grow_anim() { if (over) { $(swinger).animate({left: "5px"}, 200, 'linear', shrink_anim); } } function shrink_anim() { $(swinger).animate({left: "0"}, 200, 'linear', grow_anim); }

Considérer: 

 <div id="anim">This is a test</div>

avec: 

 #anim { padding: 15px; background: yellow; }

et: 

 var over = false; $(function() { $("#anim").hover(function() { over = true; grow_anim(); }, function() { over = false; }); }); function grow_anim() { if (over) { $("#anim").animate({paddingLeft: "100px"}, 1000, shrink_anim); } } function shrink_anim() { $("#anim").animate({paddingLeft: "15px"}, 1000, grow_anim); }

Vous pouvez également l'utiliser à l'aide de minuteries.