JQuery BUG - a problem with mouse animation

Question

I have a div on the page with the following properties:

div { width:100px; background:#0000ff; height:100px; } 

I'm animating a border-radius div on a mouseover event. The animation works great when you enter the mouse, but the animation stops working when the mouse exits the DIV. You can see LIVE CODE ON JSFIDDLE . Here, when you enter the div, the border radius smoothly gets animated, but when the mouse exits, the animation does not work, and the border radius instantly changes .

Where is the problem with the code?

And one more thing: If I move the In-and-Out mouse on the div too quickly, and then wait, the div animation continues, it does not stop.

Link to CODE

Answer 1

in Chrome , this worked for me ... it seems like the browser parses -webkit and after the jQuery animation finishes, it cannot get new values

so this is the code that worked for me:

 animateCorners = function(event) { r = (event.type=='mouseenter' ? 40 : 0); style = { 'border-top-left-radius': r, 'border-top-right-radius': r, 'border-bottom-right-radius': r, 'border-bottom-left-radius': r }; $(this).stop().animate( style , 1000, function(){ $(this).css(style); }); } $('div').hover( animateCorners, animateCorners ); 

jsFiddle

Answer 2

Is it only in Firefox?

Try changing:

 '-moz-border-radius':'0', 

in

 'MozBorderRadiusTopleft': '0', 'MozBorderRadiusTopright': '0', 'MozBorderRadiusBottomleft': '0', 'MozBorderRadiusBottomright': '0' 

This works fine for me in Firefox 3.6

Answer 3

If you change your script to this:

 $('div').hover( function(){ $(this) .animate({ 'border-radius':'40px', '-moz-border-radius':'40px', '-webkit-border-radius':'40px' } , 1000); }, function(){ $(this) .animate({ 'border-radius':'10px', '-moz-border-radius':'10px', '-webkit-border-radius':'10px' } , 1000); } ); 

You will notice that the animation with the mouse output occurs, but starts with the original radius, and not with the one you changed during the mouse script.

However, I'm not sure if this is the correct jQuery behavior or not.

Answer 4

Just change

  'border-radius':'40px', '-moz-border-radius':'40px', '-webkit-border-radius':'40px' 

from

  'border-top-left-radius': '40px', 'border-top-right-radius': '40px', 'border-bottom-right-radius': '40px', 'border-bottom-left-radius': '40px', 'MozBorderRadiusTopleft': '40px', 'MozBorderRadiusTopright': '40px', 'MozBorderRadiusBottomleft': '40px', 'MozBorderRadiusBottomright': '40px', 'WebkitBorderTopLeftRadius': '40px', 'WebkitBorderTopRightRadius': '40px', 'WebkitBorderBottomLeftRadius': '40px', 'WebkitBorderBottomRightRadius': '40px', 

also see how this is done;)

http://jsfiddle.net/EUBwG/2/

tested on: Firefox 4 , Firefox 3.6 , Chrome

Answer 5

this hover function works for me:

  function () { $(this).animate({ 'border-top-left-radius' : '0px', 'border-top-right-radius' : '0px', 'border-bottom-left-radius' : '0px', 'border-bottom-right-radius' : '0px', '-webkit-border-top-left-radius' : '0px', '-webkit-border-top-right-radius' : '0px', '-webkit-border-bottom-left-radius' : '0px', '-webkit-border-bottom-right-radius' : '0px', '-moz-border-radius-topleft' : '0px', '-moz-border-radius-topright' : '0px', '-moz-border-radius-bottomleft' : '0px', '-moz-border-radius-bottomright' : '0px' }, 1000); 

it worked in firefox 4, ie9 and some old chrome version.

Answer 6

To make it work in Chrome and Firefox, angles must be animated separately for MozBorderRadius and WebkitBorderRadius:

See http://jsfiddle.net/9LnTE/34/

 $('div').hover( function(){ $(this) .animate({ 'border-radius':'40px', '-moz-border-radius':'40px', '-webkit-border-radius':'40px' } , 1000); }, function(){ $(this) .animate({ 'border-radius':'0', 'MozBorderRadiusTopleft': '0', 'MozBorderRadiusTopright': '0', 'MozBorderRadiusBottomleft': '0', 'MozBorderRadiusBottomright': '0', 'WebkitBorderTopLeftRadius': '0', 'WebkitBorderTopRightRadius': '0', 'WebkitBorderBottomLeftRadius': '0', 'WebkitBorderBottomRightRadius': '0', } , 1000); } );