slideUp 和 slideDown，延迟问题（jQuery）答案

【问题标题】：slideUp and slideDown, delay issue (jQuery)slideUp 和 slideDown，延迟问题（jQuery）
【发布时间】：2014-02-03 11:30:24
【问题描述】：

当文档百分比高度低于 25% 时，类 (heady) 应该向上滑动，然后如果向上滚动，它会延迟 1400 毫秒出现。问题是这应该再次发生，该类不会再次滑动。

$(document).ready(function(){

    var lastScrollTop   = 0,
        delta           = 5;

$( window ).scroll(function(event) {

    var scrollTop        = $( this ).scrollTop(),
        scrollAmount     = $( window ).scrollTop(),
        documentHeight   = $( document ).height(),
        scrollPercent    = ( scrollAmount / documentHeight ) * 100;



    if ( Math.abs( lastScrollTop - scrollTop ) <= delta )
        return;

    // scroller
    if ( scrollTop > lastScrollTop && scrollPercent > 25 )
    {
        $( '.heady' ).slideUp(600);                             // scroll down code
    }
    else if ( scrollTop < lastScrollTop)
    {
        $( '.heady' ).delay(1300)                               // scroll up code
                     .slideDown(600);
    };

    lastScrollTop = scrollTop;

    });
});

【问题讨论】：

标签： javascript jquery delay slidedown slideup

【解决方案1】：

尝试使用 CSS translateY 来制作上/下动画。这样，您就可以在 heady 元素上添加/删除一个类，这将有效地“重置”滚动，从而允许每次触发滚动动画。

这就是我处理大部分动画的方式，除非我出于某种原因必须使用 JS。

【讨论】：