悬停时如何为边界半径的特定角设置动画？ (火狐)答案

【问题标题】：How to animate specific corners of the border radius when hovered in and out? (Firefox)悬停时如何为边界半径的特定角设置动画？ (火狐)
【发布时间】：2011-01-12 00:11:03
【问题描述】：

我知道如何为 Webkit 浏览器执行此操作，但我有点卡在 Firefox 中。下面的代码只是为左上角设置动画，而其余的只是对齐位置。

这是我的代码：

$('img').hover(function(){
        $(this).animate({MozBorderRadius: '50px 50px 0px 0px'}, 900);
    },function(){
        $(this).animate({MozBorderRadius: '25px 25px 0px 0px'}, 900);
});

【问题讨论】：

标签： jquery animation border css

【解决方案1】：

MozBorderRadius 是我不熟悉的属性，也许它已被弃用？尝试改用-moz-border-radius。

【讨论】：

【解决方案2】：

看起来问题是您使用的快捷方式在一个定义中包含所有四个角，当您需要单独定义它们时

试试这个：

$('img').hover(function(){
    $(this).animate({
        "MozBorderRadiusTopleft": '50px',
        "MozBorderRadiusTopright": '50px'
    }, 900);
},function(){
    $(this).animate({
        "MozBorderRadiusTopleft": '25px',
        "MozBorderRadiusTopright": '25px'
    }, 900);
});

【讨论】：

对我不起作用。什么都没发生。我添加了“alert()”只是为了确保执行输入和输出功能并且我得到消息框。尽管如此，我的 div 屏幕上没有任何变化......