javascript - bir <hr> öğesinin genişliğini tek yönde nasıl değiştirirsiniz?

jQuery ile bir <hr> öğesinin genişliğini değiştirmeye çalışıyorum ama genişliği iki yönde değişiyor. Sadece sağ tarafa doğru uzamasını istiyorum. food.runningDistance değişkeni, uygulamamda bazı işlemler yaptığımda değişiyor. Kod :

html :

<hr id="runningLine">

javascript :

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

Cevap #1

Bir hr elementi, ona margin: 0 auto uygulanmış gibi davranır. Sorunuza yaptığım yorumda belirttiğim gibi, ben bir div kullanırdım çünkü hr tematik bir bölümü işaret etmek için kullanılır, ancak siz onu farklı bir amaç için kullanıyorsunuz.

Hâlâ istediğiniz şekilde çalışmasını istiyorsanız, margin-left: 0; margin-right: 0; ayarlamanız gerekir:

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