jQuery在安卓设备上向下滑动/向上滑动缓慢的动画

Question

我对jQuery幻灯片动画有问题。我试图使菜单是隐藏的，当用户滚动页面。以下是实时示例(仅适用于移动设备)：

​

$(document).ready(function() {
    if ($(window).width() < 992) {
        $(window).scroll(function() {
            if ($(this).scrollTop() > 0) {
                $('.section-menu-link').not('.section-menu-link.active').slideUp(300);
            } else {
                $('.section-menu-link').not('.section-menu-link.active').slideDown(300);
            }
        });
    }
});

.section-menu{
    margin-top: 100px;
}
.section-menu-link{
    display: block;
    height: 30px;
    text-align: center;
}
.section-menu-link.active{
    color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section-menu">
  <a href="#" class="section-menu-link">Link</a>
  <a href="#" class="section-menu-link">Link</a>
  <a href="#" class="section-menu-link active">Link</a>
  <a href="#" class="section-menu-link">Link</a>
  <a href="#" class="section-menu-link">Link</a>
</div>
<div class="content">
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test 
</div>

​

它在iOS上运行得很好，但在我测试过的每一部安卓手机上，动画效果都不是很好。

我试着用CSS转换来实现：

​

$(document).ready(function() {
    if ($(window).width() < 992) {
        $(window).scroll(function() {
            if ($(this).scrollTop() > 0) {
                $('.section-menu').addClass('hide');
            } else {
                $('.section-menu').removeClass('hide');
            }
        });
    }
});

.section-menu{
    margin-top: 100px;
}
.section-menu.hide .section-menu-link{
    max-height: 0;
}
.section-menu.hide .section-menu-link.active{
    max-height: 30px;
}
.section-menu-link{
    display: block;
    height: 30px;
    max-height: 30px;
    overflow: hidden;
    text-align: center;
    transition: max-height .3s ease;
}
.section-menu-link.active{
    color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section-menu">
<a href="#" class="section-menu-link">Link</a>
<a href="#" class="section-menu-link">Link</a>
<a href="#" class="section-menu-link active">Link</a>
<a href="#" class="section-menu-link">Link</a>
<a href="#" class="section-menu-link">Link</a>
</div>
<div class="content">
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test 
</div>

​

但它的效果和第一个例子一样差。

有没有办法让它更顺畅呢？

Answer 1

请记住，jQuery是，而不是专门支持移动前端开发的，所以并不是所有在浏览器中工作的东西在移动设备上都是一样的。像jQuery中的click()和scroll()这样的事件通常会被困在移动浏览器中，等待几毫秒(这是为了简化移动浏览)，或者在触发之前等待一些额外的事件发生。

要消除延迟，请使用触摸事件而不是单击(或桌面)事件；例如，替换：

$(window).scroll(function() {

其内容类似于：

element.addEventListener("touchmove", touchMove, false);

正如你可能已经注意到的，上面的代码不是JQuery，而是普通的javascript (你可以在https://developer.mozilla.org/en-US/docs/Web/Events/touchmove上了解更多)。

不幸的是，jQuery在默认情况下不处理触摸事件，因此您要么使用JavaScript事件侦听器，要么使用一个额外的库来处理触摸事件(例如jQuery jQuery，尽管还有更好的选择，如https://github.com/benmajor/jQuery-Touch-Events)。