0

How do i make the animation repeat until it reaches the width 100% and stops there

<!DOCTYPE html> <head> <title>animation</title> </head> <body> <div id="Progress"> <button id="ENTER" onclick="increment()">INCREMENT</button> <div id="myProgress"> <div id="myBar"> </div> </div> </div> </body> </html> $('#myBar').css({'width':'1%','height':'30px','backgroundColor':'green'}); $('#myProgress').css({'width':'350px','backgroundColor':'lightgray', 'marginLeft':'20px','marginTop':'50px'}); }); <script> function increment(){ $('#myBar').animate({paddingLeft:'10px'},800) }

9th Jul 2017, 2:39 PM
Ricardo Chitagu
Ricardo Chitagu - avatar
3 Antworten
+ 2
Put in the script at the last sentence the width: ('#myBar').animate({paddingLeft:'10px', width:100%}, 800)
9th Jul 2017, 3:48 PM
Maart
Maart - avatar
+ 1
Ah I see Try instead of 100%: width+='10%' Not sure if that'll work though
9th Jul 2017, 4:23 PM
Maart
Maart - avatar
0
hi maart. thanks but it fills the whole width in one go. I wanted it to add 10percent everytime I click until it reaches 100percent.
9th Jul 2017, 3:53 PM
Ricardo Chitagu
Ricardo Chitagu - avatar