delver delver - 2 months ago 7
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);
}


HTML:

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


CSS:

.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

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

https://jsfiddle.net/simerjit/rgskzcj5/2/

Check jquery animate function details here... http://www.w3schools.com/jquery/eff_animate.asp