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

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);
});