Question

我在Stack Overflow上搜索了一个类似的问题，但没有一个答案解决了我的问题。基本上，我有2个按钮可以上下调整div的内容。它的工作原理完全正确，但我注意到在我多次悬停之后，每次动画效果都越来越慢。我已经使用了'线性'缓动和stop（）函数，正如许多答案所暗示的那样，但没有运气。你可以在这里看到一个实例：

http://www.diasporaduo.com（侨民部分）。

这是我的Jquery代码（html只是一个名为“diasporarightbottom”的div中名为“display”的div）

<script>
$(document).ready(function(){

    var displayh= ($('#display').height()) - ($('#diasporarightbottom').height());

    $('#displayup').hover(
        function(){
            $('#display').stop().animate({'top': -displayh}, 8000, 'linear');
        },
        function() {
            $('#display').stop()
        }
    )

    $('#displaydown').hover(
        function(){
            $('#display').stop().animate({'top': '0'}, 2000, 'linear');
        },
        function() {
            $('#display').stop()
        }
    )


})

</script>

Answer 1

这是因为无论div的滚动高度如何，您都拥有相同的动画时间。因此，总是需要2秒才能滚动到顶部，8秒会滚动到底部。

相反，您应该8000 * ((height - scrollTop) / height)（例如）获取相对于滚动的实际动画时间。

Answer 2

好吧，最后，经过深思熟虑（生锈......）后，我想出了一个答案。我必须计算速度，距离等，以达到合适的方程。这里的想法是保持相同的滚动速度（向上和向下），而不管内部div的上边缘的位置。我知道必须有一个更简单的解决方案，但我很满意这个。你可以在这里看到一个有效的例子：http://www.diasporaduo.com（侨民部分）。代码：

<script>
$('#displaydown').hover(
    function(){
        var top1= ($('#display').height()) - ($('#diasporarightbottom').height());
        var top2= $('#display').css('top');
        top2= parseInt(top2);
        var time= 3000*((top2+top1)/top1);
        $('#display').stop().animate({'top': -top1}, time, 'linear')
    },

    function() {
        $('#display').stop()
    }
)


$('#displayup').hover(
        function(){
            var top1= ($('#display').height()) - ($('#diasporarightbottom').height());
            var top2= $('#display').css('top');
            top2= parseInt(top2);
            var time= 3000*(-top2/top1);
            $('#display').stop().animate({'top': '0'}, time, 'linear');
        },
        function() {
            $('#display').stop()

        }
)
</script>

第二次悬停后，动画div内容会减慢

2 个答案: