J'ai une animation déclenchée par un événement de défilement, qui fait glisser un menu hors de la vue. Il existe également un bouton qui, lorsqu'il est cliqué, ramène le menu à la vue.

Étant donné que le menu peut être fermé par défilement, lorsque l'utilisateur clique sur le bouton pour afficher le menu, s'il défile pendant cette période de l'animation, le menu disparaît à nouveau sans que l'animation se termine.

J'ai mis en place une version simplifiée de l'animation ici http://codepen.io/emilychews/pen/evbzMQ

Je dois temporairement empêcher la fonction de défilement de fonctionner après avoir cliqué sur le bouton, ce qui, je suppose, serait mieux fait avec la méthode setTimeout () sur la fonction de clic? J'ai essayé un certain nombre de choses mais je n'arrive pas à le résoudre / à le faire fonctionner.

Toute aide serait géniale. Pour une référence rapide également, le code est ci-dessous

JQUERY

jQuery(document).ready(function($){

    // slide menu to left on scroll
    function hideOnScroll() {
      $(window).scroll(function() {
        if ( $(document).scrollTop() > 1) {

          $('.menubox').css('left', '-25%');

      }

    }); 

  }

  hideOnScroll(); // call hideOnScroll function


  // click handler to bring menu back in
  $('.mybutton').on('click', function() {

      $('.menubox').css('left', '0%');

      var scrollPause = setTimeout(hideOnScroll, 2000)  // temporarily pause hideOnScroll function 

    });

}); //end of jQuery

CSS

body {
 margin: 0;
 padding: 0;
 height: 200vh;}

.menubox {
  top: 100;
  position: fixed;
  width: 20%;
  height: 100%;
  background: red;
  padding: 10px;
  color: white;
  transition: all 2s;
}

.mybutton {
  position: fixed;
  left: 40%;
  top: 50px;
  padding: 5px 10px; 
}

HTML

<div class="menubox">Menu Box</div>

<button class="mybutton">Click to bring back menu</button>

** Veuillez également noter que j'ai simplifié l'animation pour le bien du forum, la fonction d'animation réelle contient du code Greensock, mais je ne voulais pas l'inclure au cas où cela confondrait le problème. Je ne peux donc pas simplement utiliser les .addClass () et .removeClass () ou avoir une solution de contournement qui change les valeurs CSS ou scrollTop () données. Je dois désactiver la fonction hideOnScroll () lorsque l'utilisateur clique sur le bouton pendant la durée de l'animation invoquée par le clic - qui dans les exemples est de 2 s. Ainsi, je pense que le seul moyen d'y parvenir est d'utiliser la méthode setTimeOut () (je me trompe peut-être sur ce point). Mais je ne peux pas le faire fonctionner.

Merci beaucoup

Emilie

0
The Chewy 1 avril 2017 à 03:45

2 réponses

Meilleure réponse

Vous pouvez simplement vérifier que le décalage est complet.

function hideOnScroll() {
  $(window).scroll(function() {
    if ( $(document).scrollTop() > 1) {        
     if( $('.menubox').offset().left == 0 ){
        $('.menubox').css('left', '-25%');          
      }   
   });
 }

http://codepen.io/anon/pen/aJXGbr

1
Weijian 2 avril 2017 à 18:02

J'ai apporté quelques modifications à votre javascript. Regarde

var animating = false;
    $(document).ready(function(){
        function hideOnScroll() {
            $(window).scroll(function() {
                event.preventDefault();
                if ( $(document).scrollTop() > 1 && !animating){
                    console.log("Hiding")
                    animating = true;
                    $('.menubox').animate({'left': '-25%'},2000,function(){
                        animating = false;
                    });
                }
            });
        }

        hideOnScroll();

        $('.mybutton').click(function() {
            var pos = $(window).scrollTop();
            animating = true;
            $('.menubox').animate({'left':'0%'},2000,function(){
                console.log("Finished Opening");
                animating = false;
            });
            console.log("Animating Open");
            var siId = setInterval(function(){
                if(animating){
                    console.log("Preventing Window Scrolling.");
                    $(window).scrollTop(pos);
                }
                else{
                    console.log("Stopping setInterval");
                    animating = false;
                    clearInterval(siId);
                }
            },0);
        });

    });

Cela empêchera la fenêtre de votre navigateur de défiler jusqu'à ce que votre animation d'ouverture du menu soit terminée.

J'ai également supprimé la propriété transition du style.

Testé dans Google Chrome.

Veuillez m'informer si j'ai mal interprété votre question.

1
Tirthraj Rao 2 avril 2017 à 16:52