使用jQuery爲使用jQuery的背景圖像添加淡入淡出效果

我正在使用jQuery向/從導航鏈接中添加和刪除類，從而更改背景圖像。你可以在this page上看到這一點。使用jQuery爲使用jQuery的背景圖像添加淡入淡出效果

如果可能的話，我希望在圖像之間添加淡入淡出效果，理想情況下沒有淡入淡出效果（另一種淡入淡出效果，以便完全遮住圖像）。

我不知道如何用jQuery做到這一點，並會很感激任何建議。這裏是一個點擊功能的一個例子，因爲它現在看起來：

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

感謝，

尼克

來源

2011-10-21 Nick

Offtopic ...添加體溢出-Y：滾動; （設計初級），以防止頁面「抖動」（當您撥打聯繫表單時）。 –

感謝您的提示！ – Nick

這篇文章應該是你的興趣：

圖像交叉淡入淡出過渡與jQuery ：

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

來源

2011-10-21 08:38:04 yek

謝謝。我現在試圖在您鏈接的頁面上爲我工作獲取淡入淡出方法1。我使用葉圖像處理，但不添加圖像鏈接時，即從「」更改爲「」，這是因爲它們是導航鏈接而需要的。你可以看到我正在處理的頁面[here]（http://nickputman.com/test/test.html） – Nick

 
$('#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 然後＃contact.animate ...

來源

2011-10-21 08:41:05 MaxWillmo

我對滑動接觸窗體，即面板div感到滿意。我正在尋找的是導航鏈接上的漸變過渡，即葉子。目前我正在添加和刪除一個改變背景圖像的類「current」。我希望能夠將其改變爲淡化過渡。 – Nick

使用jQuery爲使用jQuery的背景圖像添加淡入淡出效果

回答

相關問題