New course! Every coder should learn Generative AI!
Try a free lesson0
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) }
3 Answers
+ 2
Put in the script at the last sentence the width:
('#myBar').animate({paddingLeft:'10px', width:100%}, 800)
+ 1
Ah I see
Try instead of 100%:
width+='10%'
Not sure if that'll work though
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.
Often have questions like this?
Learn more efficiently, for free:
Hot today
Questions
1 Votes
Remove from a slice of a list
1 Votes
HTML CSS - Filter: brightness()
0 Votes
Why it's giving error
1 Votes
Questions
0 Votes
python courses
0 Votes
String methods
1 Votes