jQuery Girl
  1. jQuery Girl
  3. jquery animation delay lors du défilement
Intereting Posts
méthode de sorting automatique pour append une fonction comment puis-je voir un contrôle invisible avec jQuery (masquer et afficher ne fonctionne pas) Exécuter l’appel ajax une seule fois Uncaught ReferenceError: $ n’est pas défini (ajax) Quel élément de SVG / SMIL DOM a la méthode `beginElement`? Samsung S3 gauche et balayage droit ne fonctionne pas en une seule touche Test d’un object de tableau vide dans JSON avec jQuery exclure la valeur d’une zone de sélection en fonction de la valeur de l’autre zone de sélection Exécuter l’événement jQuery une seule fois après qu’une condition soit remplie Améliorer JavaScript – Code jQuery pour le menu actif et afficher / masquer les div Comment envoyer un formulaire avec un bouton de dialog jqueryui, Comment remplacer .select2-results .select2-surligné en surbrillance Quitter le plein écran avec la balise vidéo HTML5 Définir la variable de contexte Django dans Jquery me donne-t-il une erreur? Comment déclencher l’événement de changement JQuery lorsque la valeur d’entrée est modifiée par programme?

jquery animation delay lors du défilement

Je lutte actuellement avec une animation JQuery. sa juste une petite animation pour changer la hauteur et l’opacité sur le défilement. le problème est que l’animation ne s’exécute pas couramment lorsque je fais défiler. quand je fais défiler très lentement l’animation ne se termine pas dans le temps. c’est comme si elle s’arrêtait jusqu’à ce que j’arrête de faire défiler.

jquery: 

$(window).scroll(function(){ if ($(window).scrollTop() > 0){ //$('#navigation').addClass('scroll'); $('#navigation').stop().animate({height: '92px'}); $('#navigation .bg').stop().animate({opacity : '.85'}); } else { //$('#navigation').removeClass('scroll'); $('#navigation').stop().animate({height: '142px'}); $('#navigation .bg').stop().animate({opacity : '0'}); } });

css: 

 #navigation { width: 1350px; position: fixed; z-index: 2000; background: -moz-linear-gradient(top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.75)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */ height: 142px;

} 

 #navigation .bg{ background: #000; position: absolute; width: 100%; height: 92px; top:0px; left: 0px; opacity: 0;

}

Merci d’avance

vous avez oublié d’append true pour arrêter stop(true) avant vos animations qui ont résolu mes problèmes 

 $(window).scroll(function(){ if ($(window).scrollTop() > 0){ //$('#navigation').addClass('scroll'); $('#navigation').stop(true).animate({height: '92px'}); $('#navigation .bg').stop(true).animate({opacity : '.85'}); } else { //$('#navigation').removeClass('scroll'); $('#navigation').stop(true).animate({height: '142px'}); $('#navigation .bg').stop(true).animate({opacity : '0'}); } });

Le problème est que, chaque fois que vous faites défiler, vous activez la fonction de défilement. Cela signifie donc que si vous faites défiler un petit peu, vous activez la fonction de défilement des dizaines de fois. Ce dont vous avez besoin est une variable pour indiquer que l’animation est en cours. Donc, quelque chose comme ça … Au niveau mondial: 

 var animatedScroll = false;

Ensuite, votre réécriture serait 

 $(window).scroll(function(){ if (!animatedScroll) { animatedScroll = true; if ($(window).scrollTop() > 0){ //$('#navigation').addClass('scroll'); $('#navigation').stop().animate({height: '92px'}); $('#navigation .bg').stop().animate({opacity : '.85'}, function(){ animatedScroll = false;}); } else { //$('#navigation').removeClass('scroll'); $('#navigation').stop().animate({height: '142px'}); $('#navigation .bg').stop().animate({opacity : '0'}, function(){ animatedScroll = false; }); } } });

J’ai déjà eu le même poblème. Voici comment j’ai résolu, fonctionne comme un charme pour moi: 

 var animatedScroll = false; $(window).scroll(function() { if( $(window).scrollTop() > 10 && !animatedScroll ) { animatedScroll = true; //$('#navigation').addClass('scroll'); $('#navigation').stop().animate({height: '92px'}); $('#navigation .bg').stop().animate({opacity : '.85'}); } else if ( $(window).scrollTop() < 10 && animatedScroll ) { animatedScroll = false; //$('#navigation').removeClass('scroll'); $('#navigation').stop().animate({height: '142px'}); $('#navigation .bg').stop().animate({opacity : '0'}); } });