CODEWITHSUNDEEP
javascriptjqueryanimation
user759235
user759235

Reputation: 2207

reduce speed during animating a element

I am looking for a solution to animate a element from width 0 to width 100% using jquery animate(I think this is not the right solution for this). The bigger the element gets the slower should the animation go, so the speed of the animation should slow down more when the element gets bigger. There isn't much demo code to give you so I really hope that somebody does understand what I am trying to build.

// the code(not the best way to do something like this)

$('.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(){

                });
            });
        });
    });
});

Using easing does not do the trick!

Upvotes: 1

Views: 73

Answers (2)

SarathSprakash
SarathSprakash

Reputation: 4624

Try this

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);

Upvotes: 2

Liad Livnat
Liad Livnat

Reputation: 7475

you can try use linear

$('.element').animate({width: '100%'},1000 'linear')

Upvotes: 0

Related Questions