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

方法はわかりませんが、やりたいことは、Georgia のような 1 種類のフォントのリンクを取得し (デモンストレーションのために単純にしようとしています)、その上にカーソルを合わせると、まったく別の種類にフェードすることです。タホマなどのタイプ。

これらの方法の両方を使用しましたが、どちらも望ましい効果が得られないようです。

使用したいタイプの画像を使用できることはわかっていますが、画像を使用しないようにしているので、バニラ Javascript または他の jQuery メソッドを探しています。

これは可能ですか??

4

3 に答える 3

2

フォント スタイル間で実際にスムーズな変換を作成することについて話している場合、これは実際には不可能です。ただし、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

いずれにせよ、cssでもjsでも、スローモーションでフォントファミリを変更することはできません。

色、背景、幅、高さなどについては、アニメーション化したときの各フレームの状態を計算できます。

しかし、フォントファミリーの場合、フォントファミリーが画像でない限り、アニメーション期間中のフレーム状態を計算することはできないと思いますが、そうではありません。

于 2013-02-07T23:58:31.893 に答える
0

.fadeOut を使用して、要素に新しいイメージを .load してから .fadeIn を使用するのはどうですか? フェードイン/アウト機能は、不透明度を使用するよりもはるかに便利です..トランジションの速度と「勾配」を変更することもできます..

于 2013-02-07T22:53:09.180 に答える