CODEWITHSUNDEEP
jqueryfadeinfadeout
user_2215528
user_2215528

Reputation: 20007

fadeOut div's opacity and fadeIn other

I want to make a div's opacity fadeout when I click on a "li" and then fade in another div.. This works on the first one, but the second one won't work.

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

I am not the best in jquery, so I think it just might be something stupid I didn't see

jsfiddle

I don't know but somehow it doesn't work on jsfiddle (first time I used it)

Upvotes: 0

Views: 81

Answers (2)

Praveen
Praveen

Reputation: 56509

Here is a working fiddle

This happened because of positioning and inline close tag of the divs.

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

so remove the below css:

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

Better have some external styles because it is confusing

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

Upvotes: 1

Willem Ellis
Willem Ellis

Reputation: 5016

You didn't terminate your div tags. So it thinks the #red div is inside the #green div. This should work with the same 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>

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

Upvotes: 1

Related Questions