jquery - fadeOut div 的不透明度和fadeIn 其他

Question

当我单击“li”然后淡入另一个 div 时，我想使 div 的不透明度淡出。这适用于第一个，但第二个不起作用。

<script type="text/javascript"> 
$(document).ready(function(){
$("#home").click(function(){
$(".kleur").animate({opacity:0},"slow");
$("#green").animate({opacity:1},"slow");
});
});
</script>

<script type="text/javascript"> 
$(document).(function(){
$("#wiezijnwij").click(function(){
$(".kleur").animate({opacity:0},"slow");
$("#red").animate({opacity:1},"slow");
});
});
</script>

我不是 jquery 中最好的，所以我认为这可能是我没有看到的愚蠢的东西

jsfiddle

我不知道，但不知何故它在 jsfiddle 上不起作用（我第一次使用它）

Answer 1

这是一个工作小提琴

这是因为divs 的定位和内联关闭标签。

<div class="kleur" id="green"></div>
<div class="kleur" id="red"></div>

所以删除下面的CSS：

#green, #red {
top:0;
left:0;
}

最好有一些外部样式，因为它令人困惑

#green {
    background:#98bf21;
    height:100%;
    width:100%;
    position: absolute; 
    opacity: 0;
}
#red {
    background:#606060;
    height:100%;
    width:100%;
    position: absolute;       
    opacity: 0;
}

Answer 2

你没有终止你的div标签。所以它认为#reddiv 在 div 里面#green。这应该适用于相同的 javascript。

<ul>
    <li id="home"><a href="#start">Home</a>
    </li>
    <li id="wiezijnwij"><a href="#description">Wie zijn wij</a>
    </li>
</ul>
<div class="kleur" id="green"></div>
<div class="kleur" id="red"></div>

见http://jsfiddle.net/cTQJv/8/