Question

我认为我的问题在jsfiddle中更容易理解。

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

我试图在点击时淡出Google徽标，然后自动淡入雅虎徽标（不再点击）。

任何帮助或正确方向的点将不胜感激。谢谢！

Answer 1

你有很多问题。这是固定的小提琴：

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

您不能拥有两个具有相同id的元素;使用class代替
现在，我们正在使用complete回调淡入第二张图片
我们最初隐藏了fadein图片
我们正在停止默认链接行为（总是一个好主意;否则滚动页面会跳转）

Answer 2

试试这个

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

你想在fadeout（）调用的回调上挂钩fadein（）。

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

Answer 3

<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;
}

索特纳德的解决方案虽然很简洁。

如何使用jquery淡出一个图像，另一个用于点击所有图像？

3 个答案: