How to animate specific corners of the border radius when hovered in and out? (Firefox)

Question

I know how to do this for webkit browsers but i'm kinda stuck in firefox. The code below just animate the top-left corner while the rest just snap into places.

Here's my code:

$('img').hover(function(){


    $(this).animate({

        MozBorderRadius: '50px 50px 0px 0px'}, 900);
                                                       },function(){

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

Answer 1

MozBorderRadius is a property I'm not familiar with, perhaps it is deprecated? Try using -moz-border-radius instead.

Answer 2

Looks like the problem is that you are using the shortcut that has all four corners in one definition, when you need to define them separately

Try this out:

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