Wie ändert man die Breite eines <hr> Elements in einer Richtung?

Question

Ich versuche, die Breite eines <hr> Elements mit jQuery zu ändern, aber es ändert die Breite in 2 Richtungen. Ich will nur, dass es sich auf die rechte Seite streckt. Die Variable food.runningDistance ändert sich, wenn ich einige Aktionen in meiner Anwendung mache. Code:

html:

<hr id="runningLine"> 

javascript:

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

Answer 1

Ein hr Element verhält sich wie margin: 0 auto auf sie gesetzt ist. Wie ich in meinem Kommentar zu Ihrer Frage sagte, würde ich eine div verwenden, da hrsupposed to mark a thematic break ist, aber Sie verwenden es für einen anderen Zweck.

Wenn Sie noch bekommen es die Art und Weise arbeiten Sie wollen, müssen Sie margin-left: 0; margin-right: 0; setzen:

$("#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>