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

Question

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

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

我正在动画border-radius鼠标悬停事件的div.鼠标进入时动画工作正常,但当鼠标离开DIV时动画停止工作.你可以在JSFIDDLE上看到LIVE CODE.在这里输入div时,border-radius会平滑地生成动画,但是当鼠标出来时,动画不起作用,border-radius会立即改变.

代码的问题在哪里？

还有一件事,如果我在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