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

Question

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

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

我正在为鼠标悬停事件动画化div的border-radius。当鼠标进入时，动画效果很好，但是当鼠标离开DIV时，动画就停止了。您可以在JSFIDDLE上查看实际代码。在这里，当您进入div时，border-radius会平滑地动画化，但是当鼠标移出时，动画就不起作用了，border-radius会瞬间改变。

代码存在什么问题？

还有一件事，如果我快速地在div上移动鼠标，然后等待，div的动画将继续进行，不会停止。 代码链接

- Sujit Agarwal

---

看起来对我来说是一个bug，如果你这样做 $('div').animate({//change border}, function(){//change border again}); 也会发生同样的事情。因此，鼠标事件不是原因。 - Decko

@Decko - 你的意思是Jquery有一个bug吗？ - Sujit Agarwal

我认为是这样的，如果你将宽度动画化，它就可以正常工作。 - Decko

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

- Teneff

---

干得好。按照我的要求工作了。 - Sujit Agarwal

我电脑上没有安装Opera浏览器。所以您能否修改答案来支持Opera呢？ - Sujit Agarwal

Answer 2

这只是在Firefox中出现的问题吗？

尝试更改：

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

to:

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

在 Firefox 3.6 中对我来说很好用。

- SneakAttaack

Answer 3

如果你将你的脚本改成这样：

$('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的正确行为。

- Matt Dunn

Answer 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

- VAShhh

Answer 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中运行良好。

- mightyplow

---

问题并不在于像素，因为你可以看到 'border-radius': '0px', '-moz-border-radius': '0px', '-webkit-border-radius': '0px' 都无法生效。问题在于对border-radius、border-top-left-radius、border-top-right-radius、border-bottom-left-radius和border-bottom-right-radius的解释不同。 - VAShhh

是的，好的。但是如果你省略了“px”，它也不会起作用；另外一件事情当然也很重要。 - mightyplow

我不知道你在谈论哪个浏览器，但是这个 http://jsfiddle.net/EUBwG/2/ 即使没有'px'也可以工作，只是说一下。 - VAShhh

好的，你是对的。在我的测试中肯定还有其他问题。 "px" 与此无关。对于这个错误我很抱歉。 - mightyplow

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

- g_thom

---

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