CODEWITHSUNDEEP
jquery
Vineet
Vineet

Reputation: 387

Track the Width of the Element when using jQuery Animate

If I animate the width of an HTML element with jQuery Animate "animate()", how can I keep track of the width that is being increased dynamically. For example I have an HTML element '' with CSS set to 'div {width: 10%;}' 

<div></div> <!--css width set to 10%-->

I am incresing the width of the '' with jquery

$('div').animate({width: '90%'});

While this code executes and at the same time when the width of the element crosses '60%' I have to do something else like using 'if statement'.

In such a case how do I keep track of width while the Elements Width is being animated. I tried using ':animated' but did not work

I hope I am clear on what I want.

Fiddle Link

Upvotes: 1

Views: 87

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206048

fiddle

$('button').click(function() {

    var at60triggered = false;

    $('div').animate({width: '90%'},{
        duration : 3000,
        step : function( widthPerc ) {
            if(at60triggered === false  &&  widthPerc >= 60) {
                at60triggered = true;
                // Do anything here
            }
            $('p').text( widthPerc ); // Keep track of percentage value
        }
    });

});

http://api.jquery.com/animate/#step

Upvotes: 1

Related Questions