delver delver - 10 months ago 39
Javascript Question

JQuery selector with many function doesn't work properly

The method that I invoke:

vm.progress = function () {
$('.progress-line').width('100%').animate({ width: 0 }, 5, 'linear', 1000);


<div class="progress-outer">
<div class="progress-line red"></div>


.progress-outer {
position: relative;
height: 10px;
width: 100%;

.progress-line {
position: absolute;
height: 100%;
width: 0;

It has to animate progress bar from 100% to 0 in 5 secs. But it doesn't work. However, if I separate methods into two functions and invoke them by clicking on button (and only), it works.

Answer Source

For Time limit, you should use

$(".progress-line").animate({width: "100%"},5000); // time 5000 is in milliseconds

Here is the fiddle that may help you. I use background colors to show the animation

Check jquery animate function details here...