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

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。

这两种方法我都用过，但似乎都没有达到我想要的效果。

我知道我可以使用我想使用的类型的图像，但我尽量不使用图像，所以我正在寻找普通的 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();
        });
    };
});