如何在悬停进出时为边框半径的特定角设置动画？ （火狐）

Question

我知道如何为Webkit浏览器做这个，但我有点陷入Firefox。下面的代码只是为左上角设置动画，而其余代码只是对齐位置。

这是我的代码：

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

Answer 1

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

试试这个：

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

Answer 2

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