Question

我有一个由滚动事件触发的动画，这使得菜单滑出视图。点击时还有一个按钮可将菜单重新显示在视图中。

因为可以通过滚动来关闭菜单，当用户单击按钮以使菜单进入时，如果他们在动画的这段时间内滚动，则菜单会在没有动画完成的情况下再次消失。

我在这里放了一个动画的简化版http://codepen.io/emilychews/pen/evbzMQ

我需要暂时阻止单击按钮后滚动功能的工作，我假设最好用click函数的setTimeout（）方法完成？我已经尝试了很多东西，但似乎无法解决它/让它发挥作用。

任何帮助都会很棒。如需快速参考，代码如下

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>

**另请注意我为了论坛而简化了动画，实际的动画功能包含Greensock代码，但我不想包含它以防它混淆问题。因此，我不能只使用.addClass（）和.removeClass（），或者有一个更改给定CSS或scrollTop（）值的变通方法。我需要在点击调用动画的持续时间内单击按钮时禁用hideOnScroll（）函数 - 在示例中为2s。因此，我认为实现这一目标的唯一方法是使用setTimeOut（）方法（我可能错了）。但我无法让它发挥作用。

非常感谢

艾米丽

Answer 1

我在javascript进行了一些更改。看看

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);
        });

    });

这将阻止您的浏览器窗口滚动，直到菜单打开动画完成。

此外，我已从样式中删除了transition属性。

在谷歌浏览器中测试过。

如果我误解了你的问题，请通知我。

Answer 2

您只需检查偏移是否完整。

0dp

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

单击按钮时，使用setTimeOut（）暂时停止一个功能执行

2 个答案: