Jquery BUG - animation problem on mouse out

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

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

I am animating the border-radius of the div on mouse hover event. The animation works fine when the mouse is entering, but the animation stops working when the mouse is coming out of the DIV. You can see the LIVE CODE ON JSFIDDLE. Here when you will enter the div, the border-radius is smoothly getting animated, but when the mouse is coming out, the animation doesnt work and the border-radius changes instantaneously.

Where is the problem with the code?

And one more thing, If I move the mouse In-and-Out on the div t开发者_JAVA技巧oo fast, and then wait, the div-animation is going on, it doesn't stop.

The link to the CODE

in Chrome this worked for me ... it seems that the browser parses -webkit and after the animation is complete jQuery cannot get the 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

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 a mouse-out animation does occur, but starts from the original radius, rather than the one you changed it to during the mouse-over script.

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

Is this just in Firefox?

Try changing:

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

to:

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

That works fine for me in Firefox 3.6

Just change

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

with

    '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',

too see it done ;)

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

tested on : Firefox 4, Firefox 3.6, Chrome

this hover-out 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 version of chrome.

To get it to work in Chrome and Firefox, the corners have to 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);
    }
);