在进出时徘徊如何制作动画圆角半径的弯道专用？ （火狐） [英] How to animate specific corners of the border radius when hovered in and out? (Firefox)

问题描述

我知道如何为WebKit浏览器做到这一点，但我有点困在Firefox浏览器。下面的code只是动画左上角而剩下的只是卡入位置。

下面是我的code：

  $（'IMG'）。悬停（函数（）{
        $（本）.animate（{MozBorderRadius：50像素50像素0像素0像素'}，900）;
    }，功能（）{
        $（本）.animate（{MozBorderRadius：'25px的25px的0像素0像素'}，900）;
}）;
 

解决方案

貌似问题是，你正在使用的有一个定义四角快捷键，当你需要单独定义

尝试了这一点：

  $（'IMG'）。悬停（函数（）{
    $（本）.animate（{
        MozBorderRadiusTopleft：50像素，
        MozBorderRadiusTopright：50像素
    }，900）;
}，功能（）{
    $（本）.animate（{
        MozBorderRadiusTopleft：25像素，
        MozBorderRadiusTopright：25像素
    }，900）;
}）;
 

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

解决方案

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

这篇关于在进出时徘徊如何制作动画圆角半径的弯道专用？ （火狐）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！