CODEWITHSUNDEEP
jqueryanimation
Sujit Agarwal
Sujit Agarwal

Reputation: 12518

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 too fast, and then wait, the div-animation is going on, it doesn't stop.

The link to the CODE

Upvotes: 6

Views: 596

Answers (6)

mightyplow
mightyplow

Reputation: 519

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.

Upvotes: 0

VAShhh
VAShhh

Reputation: 3514

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

Upvotes: 0

g_thom
g_thom

Reputation: 2810

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);
    }
);

Upvotes: -1

SneakAttaack
SneakAttaack

Reputation: 194

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

Upvotes: 0

Teneff
Teneff

Reputation: 32148

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

Upvotes: 4

Matt Dunn
Matt Dunn

Reputation: 5420

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.

Upvotes: 0

Related Questions