CODEWITHSUNDEEP
javascriptjquerycssjquery-animate
Filippo oretti
Filippo oretti

Reputation: 49817

jQuery animate width from centered x coordinates of the element

Is possible to animate() the width of an element making a smooth center animation?

I mean animate making the element fixed on itself centered on himself x coordinates?

if i do :

<a class="animate">hey</a>
$('.animate').animate({'width':'+=1%'},500);

it works but the element is animated on the right and not from the center of himself

Upvotes: 0

Views: 2917

Answers (2)

Senica Gonzalez
Senica Gonzalez

Reputation: 8182

Yes, you'll have to move the element also.

<a class="animate" style="display:block; width:300px; border:1px solid #000; position:fixed; top:50px; left:50px;">hey</a>
jQuery(".animate").animate({'width':'0px', 'left':'200px'});

http://jsfiddle.net/7Ysbg/

New Information

So you mean something like this: http://jsfiddle.net/7Ysbg/2/

jQuery(".animate").click( function(){
    var w = jQuery(".animate").width();
    var new_w = jQuery(".animate").width()*1.5;
    var left = jQuery(".animate").offset().left - ((new_w - w)/2);
    jQuery(".animate").animate({'width':new_w+'px', 'left':left+'px'}, 'fast');
});

Upvotes: 3

bjornd
bjornd

Reputation: 22943

Just animate not only the width but also the position of the element. For example you can animate the left property. In this case you element should have position set to relative or absolute.

var width = $('.animate').width();
$('.animate').animate({
    width: width*1.01,
    left: width*0.005
},500);

Upvotes: 1

Related Questions