1

我在 Stack Overflow 上搜索了一个类似的问题，但没有一个答案能解决我的问题。基本上，我有 2 个按钮可以使 div 的内容上下动画。它工作得很好，但我注意到，在我多次悬停后，动画效果每次都越来越慢。正如许多答案所建议的那样，我使用了“线性”缓动和 stop() 函数，但没有运气。你可以在这里看到一个活生生的例子：

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

这是我的 Jquery 代码（html 只是一个名为“显示”的 div，在一个名为“diasporarightbottom”的 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>
4

2 回答 2

1

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

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

于 2013-01-27T02:20:59.727 回答
0

好的，最后，经过大量思考（生锈......），我想出了一个答案。我必须计算速度、距离等，才能得出一个合适的方程。这里的想法是保持相同的滚动速度（向上和向下），而不管内部 div 的上边距的位置如何。我知道必须有一个更简单的解决方案，但我对这个很满意。您可以在这里看到一个工作示例：http ://www.diasporadu.com （diaspora 部分）。代码：

<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>
于 2013-01-27T18:37:58.640 回答