Question

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

Answer 1

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