Menu
I am trying to change the width of a <hr> element with jQuery but it changes the width in 2 directions. I only want it to stretch to the right side. the variable food.runningDistance changes when I do some actions on my application. Code :
html :
<hr id="runningLine">
javascript :
$("#runningLine").animate({width: food.runningDistance}, 500);
787
The thickness of the hr tag can be set using the height property in CSS. The minimum height can be 1px since the smallest unit available is 1 pixel. Images can be added to make the hr tag more beautiful in appearance. It is an empty tag, and it does not require an end tag.
The HTML <hr> width attribute is used to specify the width of the horizontal line in terms of pixels or percent. Attribute Values: pixels: It sets the width of <hr> attribute in terms of pixels. %: It sets the width of <hr> attribute in terms of percentage (%).
But the way horizontal rules that blend in are usually done using colours. So if your background is for instance white ( #fff ) you can always make your HR very light. Like #eee . And use a CSS file instead of in-line styles.
An hr element behaves like margin: 0 auto is set to it. As I stated in my comment to your question, I would use a div since hr is supposed to mark a thematic break, but you're using it for a different purpose.
If you still want to get it work the way you want, you have to set margin-left: 0; margin-right: 0;:
$("#runningLine").css("margin", 0).animate({width: "10%"}, 3000);<hr id="runningLine">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
