Question

我的困境是我知道如何使用jquery animate方法在悬停时将一个图像淡入另一个图像：

$(document).ready(function(){
    $("img.a").hover(function() {
        $(this).stop().animate({"opacity": "0"}, "slow");
    },function() {
        $(this).stop().animate({"opacity": "1"}, "slow");
    });
});

我也知道如何使用CSS3 Transitions来改变文本上的悬停颜色：

a.squirrel{
color:black;  
padding:5px; 
-webkit-border-radius: 5px; 

-webkit-transition-property:color, background; 
-webkit-transition-duration: 1s, 1s; 
-webkit-transition-timing-function: linear, ease-in;
} 
a.squirrel:hover{color:red;}

我不知道怎么做，但想要做的是，使用像Georgia这样的字体链接（试图保持简单以便演示），当你将鼠标悬停在它上面时，将其淡化为完全不同的类型，如Tahoma。

我使用这两种方法，但似乎都没有给我预期的效果。

我知道我可以使用我想要使用的类型的图像，但我正在尝试不使用图像，所以我正在寻找vanilla Javascript或其他一些jQuery方法。

这可能吗？

Answer 1

如果您正在谈论实际在字体样式之间创建平滑变换，这实际上是不可能的。但是，如果你只是想在悬停上创建淡入淡出效果以在两种字体样式之间转换，那么这样的东西应该可以工作：

http://jsfiddle.net/7NATE/8/

HTML

<div id="container">
    <span class="font1">Hello World!</span>
    <span class="font2">Hello World!</span>
</div>

CSS

.font1{
    font-family: Tahoma;
}

.font2{
    font-family: Georgia;
    display: none;
}

JS

var $f1 = $(".font1"), $f2 = $(".font2"), $c = $('#container');

$c.hover(function(){    
    if(!$f1.is(':animated') && !$f2.is(':animated')){
        $f1.fadeOut(function(){
             $f2.fadeIn();
        });
    }
},
function(){
    if(!$f1.is(':animated') && !$f2.is(':animated')){
        $f2.fadeOut(function(){
            $f1.fadeIn();
        });
    };
});

Answer 2

如何使用.fadeOut，。将新图像加载到元素然后.fadeIn？淡入/淡出功能比使用不透明度更方便..你甚至可以改变转换的速度和“斜率”..

Answer 3

无论哪种方式，css或js，我都不能以慢动作改变font-family。

对于颜色，背景，宽度，高度等，我们可以计算每个帧动画时的状态。

但是对于font-family，我不认为在动画期间可以计算帧状态，除非font-family是图像，但事实并非如此。

试图在悬停时将一种类型淡入另一种类型 - CSS3或Jquery？

3 个答案: