Как я могу оживить противоположный путь?

Question

Привет,

Я изменяю ширину элемента, который служит полосой, и это работает. Однако я не могу сделайте так, чтобы оно оживляло его в противоположном направлении. Я попытался поставить перед bar_width, но безрезультатно. Ширина будет рассчитываться динамически, просто я хочу, чтобы направление шло влево, а не вправо, как это было

var bar_width=$(this).css('width') ;
$(this).css('width', '0').animate({ width: bar_width }, queue:false,duration:3500,easing: easing});

Answer 1

Вы можете анимировать его справа налево, одновременно анимируя margin-left и width элемента:

CSS

#bar {
    margin-left: 100px;
    height: 10px;
    width: 0;
    background: red;
}

jQuery

$('#bar').animate({
    marginLeft: 0,
    width: 100
});

В действии здесь .

Альтернатива, если ваш элемент расположен абсолютно, вы можете анимировать свойство leftи width одновременно .

Answer 2

Вместо 0 вы можете использовать "toggle" в качестве параметра, например:

$(this).animate({ width: "toggle" }, queue:false, duration:3500, easing:easing});

"toggle" будет анимироваться с полной ширины до 0 и наоборот в следующий раз.