在设置元素动画的过程中降低速度

reduce speed during animating a element

本文关键字：速度 过程中 设置 元素 动画      更新时间：2023-09-26

我正在寻找一种使用jquery animate将元素从宽度0动画化到宽度100%的解决方案（我认为这不是正确的解决方案）。元素越大，动画进行的速度就越慢，因此当元素越大时，动画的速度应该越慢。没有太多的演示代码可以给你，所以我真的希望有人能理解我想要构建的东西。

//代码（不是这样做的最佳方式）

$('.element').animate({width: '20%'},2000,function(){
    $('.element').animate({width: '40%'},4000,function(){
        $('.element').animate({width: '60%'},8000,function(){
            $('.element').animate({width: '80%'},16000,function(){
                $('.element').animate({width: '100%'},32000,function(){
                });
            });
        });
    });
});

使用宽松政策不会奏效

试试这个

var height = $('.element').height(),
    seconds = 1, 
    minRange = 500, 
    maxRange = 1500;
    time = height * seconds;
time = Math.min(time, maxRange);
time = Math.max(time, minRange);
$('.element').animate({width: '100%'},time);

您可以尝试使用线性

$('.element').animate({width: '100%'},1000 'linear')
相关文章：