Question

Greetings,

I am changing the width of an element which serves as a bar , and that works. However I can’t
make it so that it animates it in the opposite direction. I tried putting – in front of bar_width but to no avail. Width will be dynamically calculated it’s just that I want the direction to go to the left rather than to the right like so <——- not ———–>

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

Answer 1

You could animate it from right to left by animating both the margin-left and width of the element at the same time:

CSS

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

jQuery

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

In action here.

Alternative, if your element is positioned absolutely you could animate the left property and width at the same time.