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 =)