Comment animer des coins spécifiques du rayon de la bordure lorsque vous le faites pivoter vers l'intérieur ou l'extérieur? (Firefox)

Question

Je sais comment faire pour les navigateurs Webkit mais je suis coincé dans Firefox. Le code ci-dessous anime juste le coin en haut à gauche tandis que le reste vient se loger dans des endroits.

Voici mon code:

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

Answer 1

On dirait que le problème est que vous utilisez le raccourci qui a quatre coins dans une définition, lorsque vous devez les définir séparément

Essayez ceci:

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

Answer 2

MozBorderRadius est une propriété que je ne connais pas bien, peut-être est dépréciée? Essayez d'utiliser -moz-border-radius à la place.