CODEWITHSUNDEEP
jqueryanimationbordercss
p0larBoy
p0larBoy

Reputation: 1310

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

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

Upvotes: 0

Views: 1404

Answers (2)

PetersenDidIt
PetersenDidIt

Reputation: 25620

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

Upvotes: 2

Nate B
Nate B

Reputation: 6344

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

Upvotes: 0

Related Questions