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

这是working fiddle

这是因为div的定位和内联关闭标记。

<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代码。所以它认为#red div在#green div内。这应该使用相同的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/

fadeOut div的不透明度和淡化其他

2 个答案: