2

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

Epik
  • 3,327
  • 4
  • 17
  • 23
  • Possible duplicate: http://stackoverflow.com/questions/5080902/jquery-ui-bounce-effect-aligns-elements-left-in-firefox-and-ie8 – showdev Feb 05 '13 at 00:51

1 Answers1

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.

Travis J
  • 81,153
  • 41
  • 202
  • 273
  • 1
    Awesome thanks i added this in and it works sweet as sugar. Funny how just a few characters can make all the difference! – Epik Feb 05 '13 at 01:05