动画scaleX / scaleY

Question

jQuery does not provide a scaleX/scaleY transition effect – is there a solution (plugin) to do this?

I'm thinking of this example:

image copyright: (c) 2011 Microsoft, http://msdn.microsoft.com/en-us/library/ms742560.aspx

Answer 1

jQuery UI does offer that. Refer to http://docs.jquery.com/UI/Effects/Scale

Answer 2

I found a good way of achieving this using CSS transitions. Add the "Ease" transitions on your element and then when you want to animate it, use jQuery's addClass to add a new class which contains the scale factor.

The CSS:

.obj{
    width: 100px;
    height: 100px;
    background: grey;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.scale{
    -webkit-transform: scaleX(0.5);
    -o-transform: scaleX(0.5);
    -moz-transform: scaleX(0.5);
    transform: scaleX(0.5);
}

​The jQuery:

$("#a_b").click(function(){
    $(".obj").addClass("scale");
});​

example

Answer 3

jQuery provides width/height transition effect. Can't you use that?

You could also use a timer (setInterval) and make your own animation. You split the scale amount into a number of frames and you scale it frame by frame. You could also use some easing functions to make the animation more interesting.