0

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

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

而且我还知道如何使用 CSS3 过渡来更改文本上的悬停颜色：

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

我不知道怎么做，但想做的是用一种像格鲁吉亚这样的字体链接（为了演示目的，尽量保持简单），当你将鼠标悬停在它上面时，将它淡化成一种完全不同的字体类型如 Tahoma。

我已经使用了这两种方法，但似乎都没有给我想要的效果。

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

这个可以吗？？

4

3 回答 3

2

如果您正在谈论实际在字体样式之间创建平滑转换，这确实是不可能的。但是，如果您只想在悬停时创建淡入淡出效果以在两种字体样式之间进行转换，那么应该可以使用以下方法：

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();
        });
    };
});
于 2013-02-07T23:28:38.093 回答
0

使用 .fadeOut，将新图像加载到元素，然后使用 .fadeIn 怎么样？淡入/淡出功能比使用不透明度要方便得多。您甚至可以更改过渡的速度和“斜率”。

于 2013-02-07T22:53:09.180 回答
0

无论哪种方式，css 或 js，我都不能以慢动作更改字体系列。

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

但是对于 font-family，我认为不可能在动画期间计算帧状态，除非 font-family 是图像，但它不是。

于 2013-02-07T23:58:31.893 回答