Question

我有一个滚动脚本，如何制作动画呢？（顺利）

$(document).ready(function() {
    $.event.props.push("wheelDelta");
        $( '#lololol' ).on( 'mousewheel DOMMouseScroll', function ( e ){
            var delta = e.wheelDelta || -e.detail;              
            this.scrollLeft += ( delta < 0 ? 1 : -1 ) * 120;
            e.preventDefault();
        });
});

Answer 1

您可以替换此行

this.scrollLeft += ( delta < 0 ? 1 : -1 ) * 120;

与

$(this).animate({
    scrollLeft: $(this).scrollLeft() + ( delta < 0 ? 1 : -1 ) * 120
});

或者，您可以为$.fn.animate函数指定第二个参数，以提供可变动画时间更多信息here

Answer 2

您可以使用scrollLeft - JQuery animate

的函数设置$elem.animate({ scrollLeft: value }, durationMs, 'easeFn', callbackFn) - 属性的动画来设置滚动动画。

$(document).ready(function() {
    $.event.props.push("wheelDelta");

    $('#lololol').on('mousewheel DOMMouseScroll', function(e) {
        e.preventDefault();

        var delta = e.wheelDelta || -e.detail;    
        var scrollLeft = $(this).scrollLeft() + (delta < 0 ? 1 : -1) * 120;

        $(this).animate({ scrollLeft: scrollLeft }, 500, 'swing', function() { 
            // callback fn
        });
    });
});

如何使这个脚本动画？

2 个答案: