1

ホバー時にロゴテキスト.pngにフェード/トランジションし、ロールアウト時に再び戻したいロゴマーク.pngがあります。

効果として、ホバーすると、logomark.png は不透明度 0 にフェードアウトし、logotext.png は不透明度 0 から 1 にフェードアップします。

ユーザーがマウスを画像から離すと、反転します。logotext.png は不透明度 1 から 0 にフェードし、logomark.png は不透明度 0 から 1 にフェードバックします。

基本的にはクロスフェードです。しかし、これらの画像は背景が透明であるため、どちらも見ることができるため、一方を他方の上に重ねるほど単純ではありません。実際には、常に 1 つを非表示にする必要があります。

トランジション中にぼかし効果を追加するのも素晴らしいでしょう。不透明度を 0 から 1 にすると、イメージが完全な不透明度にフェードインするときにぼやけます。次に、不透明度 1 でぼかしがありません。

最後に、トランジションのタイミングを調整できることは素晴らしいことです。

どんな助けでも大歓迎です。

-ありがとう

4

1 に答える 1

0

jqueryを使用している場合は、非常に簡単です

$('.img').hover(function(){
$(this).fadeOut(function(){
$(this).attr("src","logotext.png");
$(this).fadeIn();
})},
function(){
$(this).fadeOut(function(){
$(this).attr("src","logomark.png");
$(this).fadeIn()
})})
于 2012-07-20T20:06:32.127 に答える