[Résolu] problemes de vitesse d'animation - Jquery par williamkramps - page 1

Bonjour à vous,

j'essaie de faire un menu "Sticky" avec un redimensionnement du logo au Scroll.

Jusqu'ici, pas de problème, mais j'utilise .animate pour fluidifier le redimensionnement, et le problème est que mon animation commence environ 5secondes apres le scroll, et pareil quand ça s'agrandit au retour du scroll (c'est même plus long)...

Je ne comprend pas d'où ça peut venir, quelqu'un pourrait-il m'aider, je suppose qu'il n'y a pas grand chose à faire, mais je ne trouve pas la solution...

Voilà pour voir ce que ça donne : http://labergerie.monespace.net/testSite/

je vous mets mon code:

la page index.php

<html>
<head>
	<meta charset="UTF-8">
	<title>test Header</title>

	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

	<link rel="stylesheet" href="style.css">


</head>
<body>

<div id="conteneur">

	<div id="menu"><!-- menu -->

		<nav class="navbar navbar-default">
		  <div class="container-fluid">
		    <!-- Brand and toggle get grouped for better mobile display -->
		    <div class="navbar-header">
		      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
		        <span class="sr-only">Toggle navigation</span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		      </button>
		      <a class="navbar-brand" href="#">
		        <img id="logo" alt="Brand" src="carre.png">
		        <!-- <p id="nomLogo">Association des Parents d'Elèves d'Andlau</p> -->


		      </a>
		    </div>
		    <!-- Collect the nav links, forms, and other content for toggling -->
		    <div class="collapse navbar-collapse  navbar-right" id="bs-example-navbar-collapse-1">
		      <ul class="nav navbar-nav">
		        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
		        <li><a href="#">Link</a></li>
		        <li><a href="#">Link</a></li>
		        <li><a href="#">Link</a></li>
		      </ul>
		    </div><!-- /.navbar-collapse -->
		  </div><!-- /.container-fluid -->
		</nav>

	</div> <!-- fin #menu -->

	<div id="contenu">


		
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque facere nihil perspiciatis minima odio a totam blanditiis nulla vel officia architecto asperiores, quos voluptatibus deleniti cumque atque veniam aliquam quaerat repellat doloribus. Itaque ea nesciunt ut non tempora eos laborum odit ducimus, molestiae dicta exercitationem omnis corporis culpa iure distinctio facilis obcaecati facere. Suscipit iure hic earum vero. Explicabo animi optio necessitatibus labore impedit delectus obcaecati at distinctio nesciunt perferendis quo totam in, laudantium veritatis esse pariatur amet, aperiam, officia fugit dicta velit asperiores. Harum atque expedita, fugit voluptates porro mollitia omnis! Enim quibusdam atque distinctio doloribus a quisquam dicta deleniti voluptatibus aliquam? Quos rem pariatur odio unde tenetur reiciendis ab ea asperiores quaerat et voluptatibus iste beatae assumenda odit voluptas, molestiae culpa. Omnis reprehenderit dignissimos libero nulla mollitia aliquam nesciunt in non eaque, labore illum atque nemo ex ipsam sint, alias id, deserunt minima. Suscipit ullam labore porro, consequuntur necessitatibus pariatur. Temporibus nulla porro autem quod itaque et voluptatem omnis ipsum, beatae dolores quos perferendis aliquid mollitia vitae repellendus sit modi, eius facere officia nobis saepe distinctio tempora! Aut officia inventore quas illo laborum itaque, soluta incidunt eveniet porro veritatis voluptatibus eligendi totam voluptas dicta quod repellat tempore! Suscipit!</p>

		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque facere nihil perspiciatis minima odio a totam blanditiis nulla vel officia architecto asperiores, quos voluptatibus deleniti cumque atque veniam aliquam quaerat repellat doloribus. Itaque ea nesciunt ut non tempora eos laborum odit ducimus, molestiae dicta exercitationem omnis corporis culpa iure distinctio facilis obcaecati facere. Suscipit iure hic earum vero. Explicabo animi optio necessitatibus labore impedit delectus obcaecati at distinctio nesciunt perferendis quo totam in, laudantium veritatis esse pariatur amet, aperiam, officia fugit dicta velit asperiores. Harum atque expedita, fugit voluptates porro mollitia omnis! Enim quibusdam atque distinctio doloribus a quisquam dicta deleniti voluptatibus aliquam? Quos rem pariatur odio unde tenetur reiciendis ab ea asperiores quaerat et voluptatibus iste beatae assumenda odit voluptas, molestiae culpa. Omnis reprehenderit dignissimos libero nulla mollitia aliquam nesciunt in non eaque, labore illum atque nemo ex ipsam sint, alias id, deserunt minima. Suscipit ullam labore porro, consequuntur necessitatibus pariatur. Temporibus nulla porro autem quod itaque et voluptatem omnis ipsum, beatae dolores quos perferendis aliquid mollitia vitae repellendus sit modi, eius facere officia nobis saepe distinctio tempora! Aut officia inventore quas illo laborum itaque, soluta incidunt eveniet porro veritatis voluptatibus eligendi totam voluptas dicta quod repellat tempore! Suscipit!</p>

		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque facere nihil perspiciatis minima odio a totam blanditiis nulla vel officia architecto asperiores, quos voluptatibus deleniti cumque atque veniam aliquam quaerat repellat doloribus. Itaque ea nesciunt ut non tempora eos laborum odit ducimus, molestiae dicta exercitationem omnis corporis culpa iure distinctio facilis obcaecati facere. Suscipit iure hic earum vero. Explicabo animi optio necessitatibus labore impedit delectus obcaecati at distinctio nesciunt perferendis quo totam in, laudantium veritatis esse pariatur amet, aperiam, officia fugit dicta velit asperiores. Harum atque expedita, fugit voluptates porro mollitia omnis! Enim quibusdam atque distinctio doloribus a quisquam dicta deleniti voluptatibus aliquam? Quos rem pariatur odio unde tenetur reiciendis ab ea asperiores quaerat et voluptatibus iste beatae assumenda odit voluptas, molestiae culpa. Omnis reprehenderit dignissimos libero nulla mollitia aliquam nesciunt in non eaque, labore illum atque nemo ex ipsam sint, alias id, deserunt minima. Suscipit ullam labore porro, consequuntur necessitatibus pariatur. Temporibus nulla porro autem quod itaque et voluptatem omnis ipsum, beatae dolores quos perferendis aliquid mollitia vitae repellendus sit modi, eius facere officia nobis saepe distinctio tempora! Aut officia inventore quas illo laborum itaque, soluta incidunt eveniet porro veritatis voluptatibus eligendi totam voluptas dicta quod repellat tempore! Suscipit!</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque facere nihil perspiciatis minima odio a totam blanditiis nulla vel officia architecto asperiores, quos voluptatibus deleniti cumque atque veniam aliquam quaerat repellat doloribus. Itaque ea nesciunt ut non tempora eos laborum odit ducimus, molestiae dicta exercitationem omnis corporis culpa iure distinctio facilis obcaecati facere. Suscipit iure hic earum vero. Explicabo animi optio necessitatibus labore impedit delectus obcaecati at distinctio nesciunt perferendis quo totam in, laudantium veritatis esse pariatur amet, aperiam, officia fugit dicta velit asperiores. Harum atque expedita, fugit voluptates porro mollitia omnis! Enim quibusdam atque distinctio doloribus a quisquam dicta deleniti voluptatibus aliquam? Quos rem pariatur odio unde tenetur reiciendis ab ea asperiores quaerat et voluptatibus iste beatae assumenda odit voluptas, molestiae culpa. Omnis reprehenderit dignissimos libero nulla mollitia aliquam nesciunt in non eaque, labore illum atque nemo ex ipsam sint, alias id, deserunt minima. Suscipit ullam labore porro, consequuntur necessitatibus pariatur. Temporibus nulla porro autem quod itaque et voluptatem omnis ipsum, beatae dolores quos perferendis aliquid mollitia vitae repellendus sit modi, eius facere officia nobis saepe distinctio tempora! Aut officia inventore quas illo laborum itaque, soluta incidunt eveniet porro veritatis voluptatibus eligendi totam voluptas dicta quod repellat tempore! Suscipit!</p>

	</div>

</div>


	
	<!-- APPEL DES SCRIPTS -->
	<script
			  src="https://code.jquery.com/jquery-3.2.1.min.js"
			  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
			  crossorigin="anonymous"></script>
	<script
			  src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
			  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
			  crossorigin="anonymous"></script> 
	<script src="js/script.js"></script>
	<!-- FIN APPEL DES SCRIPTS -->

</body>
</html>

et la page script.js

$(document).ready(function(){

  $(window).scroll(function() {
        if ($(this).scrollTop() >= 80){

      $('#menu').addClass('fixed');
      $('.navbar').css('height', '50px');
       $('#logo').animate({  width: "40px", height: "40px" }, 1000 );

    } else {

      $('#menu').removeClass('fixed');
      $('.navbar').css('height', '70px');
      $('#logo').animate({  width: "90px", height: "90px" }, 1000 );

    }
  });  

});

Merci d'avance de vos réponses !

-
Edité par williamkramps 6 janvier 2018 à 14:49:54

williamkramps

5 janvier 2018 à 22:35:22

7 janvier 2018 à 9:54:08

Hello,

personne n'a d'idées ?

LeKangouroo

7 janvier 2018 à 18:04:09

Plop,

Je pense que ça vient du scroll qui est détecté beaucoup trop de fois. Regarde les messages dans la console du codepen ci-dessous.

https://codepen.io/anon/pen/WdXBEj

Pour remédier à ça, il te faudrait une fonction "debounce" qui permet d'exécuter ton code qu'une seule fois, au bout d'un délai que tu auras défini. Je te conseille d'utiliser Lodash, qui inclut déjà une fonction debounce => https://lodash.com/docs/#debounce

Pour info, lodash est une bibliothèque de fonction générique qui te permet de ne pas réinventer la roue pour tout ce qui est logique pure (ex : fonctions de tri, de filtrage, groupage, etc.).

8 janvier 2018 à 8:18:16

Merci leKangouroo pour ta réponse, je regarderais ça ce soir en rentrant du taf !

Edit:

Bon alors du coup, j'ai un peu de mal à capter le debounce, mais je vais persévérer...

Par contre, ce qui me pose question, c'est que cela fonctionne bien si je n'utilise pas .animate ... est-ce que cela collerait quand même avec ton idée leKangouroo ?

-
Edité par williamkramps 8 janvier 2018 à 21:06:31

8 janvier 2018 à 23:45:42

Pour une explication sur le debounce : https://www.grafikart.fr/tutoriels/javascript/debounce-throttle-642

Et sinon, je pensais surtout à l'animate vu que c'est ça qui ne marche pas si je comprends bien.

9 janvier 2018 à 18:26:57

Ok, cela roule avec le debounce merci leKangouroo, par contre j'ai quand même l'impression d'une latence si ça va trop vite, mais mon problème est régler ...

je remet mon .js, pour voir si j'ai bien utiliser le debounce:

$(document).ready(function(){


  $(window).scroll( _.debounce( function() {

        if ($(this).scrollTop() >= 80){

      $('#menu').addClass('fixed');
      $('.navbar').css('height', '50px');
      $('#logo').animate({  width: "40px", height: "40px" }, 1000 );

    } else {

      $('#menu').removeClass('fixed');
      $('.navbar').css('height', '70px');
      $('#logo').animate({  width: "90px", height: "90px" }, 1000 );

    }

  }, 40))  ;

});

Et sinon, est-ce que ces problèmes ne viennent pas du code lui-même ? Je dis ça parce que je débute et du coup ça me permettrais d'apprendre...

Encore merci !

9 janvier 2018 à 23:42:00

En réduisant la durée de l'animation et en définissant un délai de 150 ms pour le debounce ça va mieux ?

10 janvier 2018 à 17:45:55

Ouep, c'est nickel comme ça, merci beaucoup leKangouroo

-
Edité par williamkramps 10 janvier 2018 à 17:46:07

problemes de vitesse d'animation - Jquery

problemes de vitesse d'animation - Jquery

Supprimer

Modérer

Signaler le message aux modérateurs