Как анимировать определенные углы радиуса границы при наведении внутрь и наружу? (Fire Fox)

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 вместо этого.