jquery .animate() 滚动时

Question

我为移动设备创建了一个菜单，该菜单被隐藏并替换为滚动的汉堡菜单。最初我使用的是 jQuery .fadein() 和 .fadeOut() ，它们工作正常。我希望它们同时滑入和滑出，所以我使用 .animate() 并注意到它仅在滚动停止时才显示动画。有没有办法让它在滚动时立即动画？

这里有一个 fiddle 有问题

代码如下：

HTML

<div>

<div class="fade">
    menu
</div>

  <button id="button" style="background: url(https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png) no-repeat center; background-size: 30px 30px;"></button>

CSS

body {
    height: 5000px;    
}
.fade {
    right:0px;
    top: 20px;
    position: fixed;
    height: 70px;
    width: 50px;
    background-color: #d15757;
    color: #fff;
    padding: 10px;
}
#button {
  top: 20px;
  right: -20px;
  opacity:0;
  position: fixed;
  height: 30px;
  width: 30px;
}

Javascript

// detect size of window (i.e. detect mobile)
var mq = window.matchMedia('all and (max-width: 700px)');

// hide menu and display button on scroll
$(window).scroll(function() {
    if(mq.matches) {
    //width of browser is bigger than 700px
    if ($(this).scrollTop()>100)
     {
        $('.fade').stop().animate({ // menu goes out
            right: '-20px',
            opacity: '0',
        });
        $('#button').stop().animate({ // button comes in
            right: '30px',
            opacity: '1',
        });
     }
    else
     {
      $('.fade').stop().animate({ // menu comes in
            right: '0px',
            opacity: '1',
        });
      $('#button').stop().animate({ // button goes out
            right: '-20px',
            opacity: '0',
        });
     }
  } else {
    // the width of browser is less then 700px
  }

 });


 $(document).ready(function(){
    if(mq.matches) {
    // the width of browser is more then 500px
        $("#button").click(function(){
            $(".fade").stop().animate({ // menu comes in
                right: '0px',
                opacity: '1',
            });
            $("#button").stop().animate({ // button goes out
                right: '-20px',
                opacity: '0',
            });
        });

     } else {
        // the width of browser is less then 500px
     }  
 });

Answer 1

您在每个滚动事件上都调用了 stop()，因此动画将停止。

一个技巧是在菜单

中添加 class

// hide menu and display button on scroll
$(window).scroll(function() {
    if(mq.matches) {
        //width of browser is bigger than 700px
        if ($(this).scrollTop()>100)
        {
           if(!$('.fade').is('.hidden')) {
               $('.fade').stop().animate({ // menu goes out
                  right: '-20px',
                  opacity: '0',
               }).addClass('hidden');
               $('#button').stop().animate({ // button comes in
                   right: '30px',
                   opacity: '1',
               });
           }
        }
        else
        {
            if($('.fade').is('.hidden')) {
                $('.fade').stop().animate({ // menu comes in
                   right: '0px',
                   opacity: '1',
                }).removeClass('hidden');
                $('#button').stop().animate({ // button goes out
                   right: '-20px',
                   opacity: '0',
                });
            }
        }
    } else {
    // the width of browser is less then 700px
    }

 });

参见 JSFiddle here

jquery .animate() 滚动时

jquery .animate() while scrolling

html

javascript

css

jquery

jquery-animate

HTML

CSS

Javascript