Jquery BUG - 鼠标移出时的动画问题

Question

我的页面上有一个具有以下属性的 div:

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

我在鼠标悬停事件时对 div 的 border-radius 进行动画处理。当鼠标进入时动画工作正常，但当鼠标离开 DIV 时动画停止工作。你可以看到LIVE CODE ON JSFIDDLE 。在这里，当您进入 div 时，边框半径会平滑地生成动画，但是当鼠标移出时，动画不起作用，边框半径会立即发生变化。

代码问题出在哪里？

还有一件事，如果我在 div 上进出移动鼠标的速度太快，然后等待，div 动画就会继续，它不会停止。

链接到CODE

Answer 1

在 Chrome 中，这对我有用......浏览器似乎解析 -webkit 并且在动画完成后 jQuery 无法获取新值

所以这是对我有用的代码:

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