Jquery BUG - 鼠标移出动画问题答案

【问题标题】：Jquery BUG - animation problem on mouse outJquery BUG - 鼠标移出动画问题
【发布时间】：2011-06-06 08:35:58
【问题描述】：

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

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

我正在为鼠标悬停事件的 div 的 border-radius 设置动画。鼠标进入时动画效果很好，但是当鼠标离开 DIV 时动画停止工作。你可以看到LIVE CODE ON JSFIDDLE。这里当你进入 div 时，border-radius 平滑动画，但是当鼠标出来时，动画不起作用，border-radius 瞬间改变。

代码哪里出了问题？

还有一件事，如果我将鼠标移入和移出 div 太快，然后等待，div 动画会继续，它不会停止。

CODE的链接

【问题讨论】：

对我来说看起来像一个错误，如果你这样做 $('div').animate({//change border}, function(){//change border again}); 会发生同样的事情。所以鼠标事件不是原因。
@Decko - 你的意思是在 Jquery 中有一个错误？
我想是的，如果你为宽度设置动画，它就可以正常工作。

标签： jquery animation

【解决方案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

【讨论】：

干得好。按我的意愿工作。
我的电脑上没有安装 Opera。那么您能否修改答案以支持 Opera？

【解决方案2】：

如果您将脚本更改为：

$('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);
    }
);

您会注意到确实会出现鼠标移出动画，但从原始半径开始，而不是在鼠标悬停脚本期间将其更改为的那个。

但是，我不确定这是否是 jQuery 的正确行为。

【讨论】：

【解决方案3】：

这只是在 Firefox 中吗？

尝试改变：

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

到：

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

这在 Firefox 3.6 中对我来说很好

【讨论】：

【解决方案4】：

改变一下

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

与

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

也看到它完成了；）

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

测试于：Firefox 4、Firefox 3.6、Chrome

【讨论】：

【解决方案5】：

这个悬停功能对我有用：

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

它在 firefox 4、ie9 和一些旧版本的 chrome 中工作。

【讨论】：

问题不在于像素，你可以看到'border-radius':'0px', '-moz-border-radius':'0px', '-webkit-border-radius' :'0px' 不起作用。问题是border-radius和border-top-left-radius的不同解释border-top-right-radiusborder-bottom-left-radiusborder-bottom-right-radius
是的，好的。但是，当您省略 px 时，它无论如何都不起作用；）当然，另一件事也很重要
我不知道你在说什么浏览器，但是这个jsfiddle.net/EUBwG/2 工作，即使他没有'px'，只是说'
好吧，你是对的。在我的测试过程中一定有其他问题。 “px”不必对它做任何事情。对不起这个错误

【解决方案6】：

要让它在 Chrome 和 Firefox 中运行，必须为 MozBorderRadius 和 WebkitBorderRadius 分别设置角的动画：

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

【讨论】：

提醒您在所有当前版本的浏览器中进行测试，谢谢。