CODEWITHSUNDEEP
jqueryanimationfadeinfadeout
3rdculturekid
3rdculturekid

Reputation: 11

jquery fade in / out + close button

This is supposed to be the "team" section of a site. Each circle would represent a member of the team. The code works when you click on the blue circle to fade the black div in. Then you can click on the red box inside the black div to fade back to all 3 circles.

However, when you click the red circle the next div does not fade in. Only the circles fade out. I can't figure out why this is happening.

I am also stuck at the part that would allow the red box (inside the black div) to fade out whatever new div fades in. It is basically serving as the close button for the new divs fading in.

I hope this makes sense.

http://jsfiddle.net/3rdculturekid/Zr3Nr/20/

$("document").ready(function () {

//fade in black div
$('#one').click(function () {
    $('#circles').fadeOut('slow', function () {
        $('#black').fadeIn('slow');
    });
});

//fade out black div
$('#x').click(function () {
    $('#black').fadeOut('slow', function () {
        $('#circles').fadeIn('slow');
    });
});

//fade in green div
$('#two').click(function () {
    $('#circles').fadeOut('slow', function () {
        $('#green').fadeIn('slow');
    });
});

});

Upvotes: 1

Views: 1184

Answers (1)

Adil Shaikh
Adil Shaikh

Reputation: 44740

You were not closing one of your div tag properly

<div id="black">
    <div id="x"></div>
</div>                <-------- this one
<div id="green">
    <div id="x"></div>
</div>

Demo --> http://jsfiddle.net/Zr3Nr/21/

Also, You are using x as duplicate ID which is creating problem's, You can use class instead

<div id="black">
    <div class="x"></div>
</div>
<div id="green">
    <div class="x"></div>
</div>

Demo with x as class ---> http://jsfiddle.net/Zr3Nr/22/

Upvotes: 0

Related Questions