How to change the width of the <hr> element in one direction?

Question

I am trying to change the width of an <hr> element using jQuery, but it changes the width in 2 directions. I just want him to stretch to the right side. the food.runningDistance variable changes when I perform some actions in my application. Code:

html:

 <hr id="runningLine"> 

javascript:

 $("#runningLine").animate({width: food.runningDistance}, 500); 

Answer 1

The hr element behaves like margin: 0 auto . As I said in my commentary on your question, I would use a div , since hr should have marked a thematic breakthrough , but you’ll use it for another purpose.

If you still want it to work the way you want, you should set margin-left: 0; margin-right: 0; 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>