Question

我在页面上有一个div，其中包含以下属性：

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

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

代码的问题在哪里？

还有一件事，如果我在div上移动鼠标进出太快，然后等待，div动画正在进行，它不会停止。 < / p>

指向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

Answer 2

这只是在Firefox中吗？

尝试更改：

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

为：

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

在Firefox 3.6中，这对我来说很好用

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

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

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。

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

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

6 个答案: