Question

我正在尝试创建一个不断滚动的“菜单”。我有代码工作，但滚动动画非常不稳定。如何使菜单滚动更顺畅？我之前使用过animate（）并且从未遇到过这个问题。

JAVASCRIPT CODE：

    $(document).ready(function() {
            var currentSpeed = parseInt($("#scrollSpeed").val());
            setInterval('scroll()', currentSpeed);
        });

function scroll(){
        var scrollSpeed = parseInt($("#scrollSpeed").val());    
        $("#scrollup .divTableBody").animate({ top: '-=' + $('#scrollup .divTableBody .divTableRow:last').height() }, scrollSpeed, 'linear', function() {
            var offset = $('#scrollup .divTableBody .divTableRow:last').offset().top;
            if (offset <= 1352) {
                $('.divTable').css("top", 0);
                $('#scrollup .divTableBody .divTableRow:last').after($('#scrollup .divTableBody .divTableRow:first').detach());
            }
        });
    }

Answer 1

为了让您的动画更顺畅地使用Velocity.js，它可以让您的动画非常流畅。在下载Velocity脚本文件并将其包含在您的页面中之后，您所要做的就是将代码从.animation({...});替换为.velocity({...});。我一直在做同样的事情，以避免JQuery的不稳定动画。

如果你想平滑滚动，那么你需要做的就是：

 $("#buttonToClick").click(function () {
        $("#toWhichDivtoScroll").velocity("scroll", 1000);
    });

已编辑的答案

检查您是否在页面中正确添加了velocity.js和velocity-ui.js文件。对以下代码进行一些修改并尝试运行：

var topValue = 0; function scroll() { var scrollSpeed = parseInt($("#scrollSpeed").val()); $("#scrollup .divTableBody .divTableRow").velocity({top: topValue}, scrollSpeed, 'linear', function () { topValue += 25; var offset = $('#scrollup .divTableBody .divTableRow:last').offset().top; if(offset <= 1352) { $('.divTable').velocity("scroll", 500); $('#scrollup .divTableBody .divTableRow:last').after($('#scrollup .divTableBody .divTableRow:first').detach()); } });

播放更改top属性甚至是scrollSpeed和currentSpeed，因为它们是造成波动的一部分。

要了解如何使用 Velocity 使动画流畅，您可以参考此链接Improving Velocity UI Animation

连续滚动div菜单动画跳跃

1 个答案: