Making a jQuery scaled <div> stay at its new size

Question

I've got a circular div I'm trying to scale when a button is clicked:

<button id="2007">2007</button>
<div id="test2"></div>

I've got it styled with CSS for starters:

#test2 {
  background-color: red;
  opacity:0.5;
  border-radius: 50%;
  width: 300px;
  height: 300px;
  position: absolute;
  z-index:2;
}

And my JS works to reduce the div size FROM THE MIDDLE CENTER, just as I'd like:

$("#2007").click(function(){
    $("#test2").effect("scale",{percent: 50},"1000");
});

Problem is, as soon as the scale effect is finished, the DIV reverts back to its original size and jumps to a new position.

Does anyone know how I can keep the DIV at its scaled-to dimensions AND prevent it from jumping to reposition?

Here's a JSbin example - just click the "2007" button to see what's happening.

EDIT: I've added a JSFiddle

Changing .effect to .animate doesn't work at all, and I'm sure there must be a way to use .effect without having the div jump, but I'm still stumped.

Answer 1

jQuery UI effect will restore it original property after complete, you can try using CSS or .animate(), here is a example of using CSS (http://jsfiddle.net/steelywing/JQdHf/3/)

$("#2007").click(function(){
    $("#test2").css({
        'transition': 'all 1s',
        'transform': 'scale(0.5)',
    });
});

Updated: Have a see at this library (https://github.com/rstacruz/jquery.transit), I think this is good for you request =)

Answer 2

In order to make stay in final state, after animation stops - you just need to use correct jquery version + correct jquery-ui version (I used jquery-1.7.2+jquery-ui-1.8.18 in this example - and it works): live example

Source code:

    $("#big").click(function(){
     $(".target").effect( "size", 
      { to: {width: 200,height: 200} }, 1000 );
  });

  $("#small").click(function(){
     $(".target").effect( "size", 
      { to: {width: 100,height: 100} }, 1000 );
  });

As you ca see there is to specific stop functions.

Answer 3

Maybe you can try providing a callback to be executed after the effect is completed.

You can see an example here : http://jsfiddle.net/mULWX/1/