Question

我有jQuery幻灯片动画的问题。我尝试制作用户滚动页面时隐藏的菜单。这是现场示例（仅适用于移动设备）：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

它在iOS上运行良好，但在我测试过的每部Android手机上，动画都不能顺利运行。

我尝试使用CSS转换：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

但它的效果与第一个例子一样糟糕。

有没有办法让它更顺畅？

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 Mobile，尽管有更好的选择，比如https://github.com/benmajor/jQuery-Touch-Events）。

Android设备上的jQuery slideDown / slideUp laggy动画

1 个答案: