Using effect.("scale"): keeping the image in place and not relocating..

Question

So I see what is happening. I have an image positioned, scale it up from the center and then it jerks over to the original positioning given to it by the css.

What I thought I could do is scale it and then position it accordingly via .css to avoid a jerk... so that the object grows in place.

Not happening. Anytime I try or see a center scaled item, it 'pops' back to the original x/y position from before the scale.

What I would like is to scale an image up or down from it's center point and have it stay wherever it ends up after the scaling.

Here's the simple code I have so far:

$("#cs_house").effect("scale", {percent:120}, 250);
$("#cs_house").fadeTo(10,1);
$("#cs_house").css({'top':28+'px','left':10+'px'});

so this snippet scales up an image with an id of cs_house and then fades it back. The last line is what I used to keep it in place, but it resorts to scaling from the top left. ?

Answer 1

First: I would like to recommend to position the holder absolute and give it a width matching the target-width(image-width*1.2). Furthermore set the text-align of the holder to "center" and the margin of the image to "auto".

By that way you got the image always centered inside the holder.

More important: dont use effect() The same effect can be done with animate(), simply call animate with {width:imagewidth*1.2}. animate() seems to do the effect "cleaner" ithout any jerk, because it will not do anything more than you want to(scale the image) .

effect() does more, it plays around with the position and injects some needed helper-objects

see example

Answer 2

Dr.Molle... this is close but the scale happens from the top center rather than the middle center.... at least in FireFox on Windows.

This has given me something to think with, so thanks!