JQuery bounce is jumping out of place?

Question

I'm trying to use the jQuery UI bounce effect on a button positioned with css "left" on mouseover. It seems to work, however if you mouse over back and forth over it a few times it moves out of place and sticks to the left. I'm not really sure why it's doing this. Here's my code: http://jsbin.com/afoyiz/1/edit

Answer 1

The problem is that your css definition

left: 20%

seems to be getting overridden. Possibly as a result of bounce issuing left: 0 and then not properly caching the previous value of left. What ensues is left: 0 being cached as the proper value and the element getting shot to the left when all is said and done.

What I would suggest is locking this functionality. This will prevent the error, and also will prevent the gaming of the button.

$(document).ready(function() {
  var lockMouseover;
  $("#button").mouseover(function(){
    if( typeof lockMouseover == "undefined" ){
     $("#button").effect( "bounce", {times:3}, 300 );
      lockMouseover = setTimeout( function(){ var un; lockMouseover = un;}, 950 );
    }
  });

});

I tested this on your jsbin and it worked.