Lenteur animation scrollTop

iluzzion
Javascript

Bonjour à tous,

Alors voilà j'ai mis en place un système de scroll animé via deux boutons, l'animation sur le click du bouton permettant de descendre
se fait instantanément comme je le souhaite.

En revanche lorsque je click sur le bouton permettant de remonter le scroll, la un delay de 1/2 seconde est appliqué et je ne trouve pas pourquoi.

Je vous joint ci-dessous les deux bout de codes permettant de faire ces animations :

("a .imgDown").click(function(){

          $('.Maincontent').animate({scrollTop: heightCible}, 2000,'easeOutQuint');
          $('.imgDown').animate({opacity: 0}, 100,'easeOutQuint');
           //Permet de déclencher l'animation aprés xxtemps d'attente
          setTimeout(function() {   
            $('.imgUp').animate({opacity : 1}, { duration: "slow" }); 
            $(".imgUp").css("padding-top",( heightCible - heightMainContent )/2);
          }, 100);     
          return false;
        });
        $("a .imgUp").click(function(){  
          $('.Maincontent').animate({scrollTop: 0}, 1000);          
          $('.imgUp').delay(1000).animate({opacity: 0}, 100,'easeOutQuint');
          $('.imgDown').delay(1000).animate({opacity : 1}, { duration: "slow" }); 

          return false;          
        });

La en l'état les deux codes pour les boutons ne sont pas identique mais j'ai essayé en mettant exactement le même et j'ai toujours ce satané délai.

Merci d'avance pour votre aide et bonne soirée,
Nico.

4 réponses

Nairolf
Réponse acceptée

As-tu essayé un .clearqueue() avant?

Natà
Réponse acceptée

Salut,
La comme ça sans tester je dirais :

$("a .imgUp").click(function(){  

          $('.Maincontent').animate({scrollTop: 0}, 1000,function(){

              $('.imgUp').delay(1000).animate({opacity: 0}, 100,'easeOutQuint');
              $('.imgDown').delay(1000).animate({opacity : 1}, { duration: "slow" }); 
            });

          return false;          
        });

Et du coup, tu peux probablement virer les delay()

iluzzion
Auteur

Bonjour et merci pour vos réponse,

en faisant un .clearqueue() l'animation se déclenche bien mais du-coup ça dérègle un peu toute mes animation.

Je continue a chercher et me renseigner sur ce point, je ne m'en étais encore jamais servit jusqu’à lors.

iluzzion
Auteur

Désolé pour le double post, j'ai résolue mon problème en utilisant .stop().

Je joint le code au cas ou ça puisse aider quelqu'un

$("a .imgUp").click(function(){       
          $('.Maincontent').stop();
          $('.Maincontent').animate({scrollTop: 0});          
          $('.imgUp').delay(1000).animate({opacity: 0}, 100,'easeOutQuint');
          $('.imgDown').delay(1000).animate({opacity : 1}, { duration: "slow" }); 

          return false;   
        });

Merci a vous Nairolf et Natà de m'avoir aidé.