如何褪色一个图像，另一个，所有点击使用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？

回答

相关问题