jQueryを使用して背景画像のaddClassへの遷移を追加する

Question

jQueryを使用して、ナビゲーションリンクとの間でクラスを追加または削除して、背景画像を変更しています。これはthis pageのアクションで確認できます。

可能であれば、画像間にフェードトランジションを追加することをお勧めします。完全にフェードアウトしたり、フェードインしたりすることなく、理想的にフェードインします。

jQueryでこれをどうやって行うのかよく分かりませんが、アドバイスに感謝します。ここでは、それが現在に見えるようクリック機能の例です。

$("nav").delegate("a.fade", "click", function() 
    { 
     window.location.hash = $(this).attr("href"); 
     $("#panel").slideUp("slow"); 
     $(this).addClass("current"); 
     $("#contact").removeClass("current"); 
     return false; 
    }); 

おかげで、

ニックは

Answer 1

この記事では、あなたの興味のあるべき：jQueryを使って

画像のクロスフェードトランジション：

http://css.dzone.com/news/jquery-image-cross-fade-transi

Answer 2

 
$('#panel').animate({ opacity: '-=0.5' }, 200); 

jQuery.animate関数を使用します。私の例＃パネルの不透明度（1から始まる）は、200ミリ秒以上に0.5に減少します。

#panelと#contactの両方でこれを行います。あなたはあなたが望むようにアニメートするように、タイミングで遊ぶことができます。

 
$('object').animate({property: target value (-/+)}, timespan); 

#panelの不透明度値をチェックして、#contactアニメーションを開始することもできます。

場合＃のpanel.opacity < 0.8 その後、＃1 contact.animate ...