How can I animate the opposite way?

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.

Answer 2

Instead of 0 you can use "toggle" as the parameter, like this:

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

"toggle" will animate from it's full width to 0, and the reverse next time.