如何褪色一個圖像，另一個，所有點擊使用jQuery？

我認爲我的問題在jsfiddle中會更容易理解。如何褪色一個圖像，另一個，所有點擊使用jQuery？

http://jsfiddle.net/KjR8D/4/

我想淡出上點擊谷歌標誌，然後在雅虎標誌自動消失（沒有再次點擊）。

任何幫助或點在正確的方向將不勝感激。謝謝！

來源

2011-10-13 Pat

嘗試使用.toggle（） – Jung3o

所以你想讓他們中的一個隱藏onload？另外，'id'必須是唯一的，如果你想爲多個元素使用相同的'id'，則切換到'class'。 –

是的，所以雅虎標誌是隱藏的，然後在Google徽標淡出後出現。 – Pat

您有許多問題。這裏的固定小提琴：

http://jsfiddle.net/KjR8D/7/

你不能有相同的id兩個元素;使用class代替
現在，我們正在使用的complete回調第二圖像
我們躲在fadein圖像最初
我們停止默認的鏈接行爲（總是一個好主意淡入;否則一個滾動頁面會跳轉）

來源

2011-10-13 23:08:50

正是我在找的東西。感謝您修復我的錯誤！如果我想再重複一次（淡出雅虎和另一張圖片），我是否需要創建一個循環？ – Pat

@Pat：很高興幫助:)沒有循環;就像在'fadeOut'中添加'complete'回調函數一樣，在'fadeIn'上添加一個回調函數。 –

不是一件討厭的事，但你能用通俗的話來解釋嗎？我假設你的意思是在第10行的末尾添加'，function（）{'感謝你的幫助！ – Pat

試試這個

$("a#fadeout").click(function(){ 
    $("#image").fadeOut(1000, function(){ 
     $("#fadein").fadeIn(1000); 
    }); 
});

要勾上淡出（）調用的回調淡入（）調用。

http://jsfiddle.net/KjR8D/6/

來源

2011-10-13 23:06:51 sottenad

<body> 

<a href="#" id="fadeout"><div id="image"><img id="google" src="http://www.google.com/intl/en_com/images/srpr/logo3w.png"></div></a> 

<a href="#" id="fadein"><div id="image"><img id="yahoo" src="http://l.yimg.com/a/i/ww/met/yahoo_logo_us_061509.png"></div></a> 

</body> 

$(function(){ 
$("#yahoo").hide(); 
$("a#fadeout").click(function(){ 
    $("#google").fadeOut(1000); 
    $("#yahoo").fadeIn(1000); 

    }); 
    $("a#fadein").click(function(){ 
     $("#yahoo").fadeOut(1000); 
     $("#google").fadeIn(1000); 
    }); 
}); 

#image{ 
position:absolute; 
top:50%; 
left:50%; 
margin-top:-168px; 
margin-left:-168px; 
}

sottenad的解決方案是整潔，雖然。

來源

2011-10-13 23:14:20

如何褪色一個圖像，另一個，所有點擊使用jQuery？

回答

相關問題