CODEWITHSUNDEEP
jqueryhiddenfadeout
MacGyver_97
MacGyver_97

Reputation: 229

JQuery Fade Out/Hide Previous DIVS

I'm trying to create a simple page where 3 divs overlap one another with various content. Within each DIV is an image (a NEXT button) that should fade out the initially shown DIV, and FadeIn the second DIV. Within that 2nd DIV, is another NEXT button to FadeOut DIV 2 and FadeIn DIV 3.

I'm having problems hiding the previously shown DIV, and all 3 end up showing all their content on top of one another.

Please help:

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
</head>

<style>
div {
width:80px; 
display:none;
height:80px; 
z-index : 1;
position: fixed; 
top: 20px; 
left: 20px; 
}

div#one { background:#f00; }
div#two { background:#0f0; }
div#three { background:#00f; }


form {
    border: thick solid #1D4600;
        height: 500px;
}
</style>
</head>

<body>
<form>
    <div id="one" style="display:inline !important">
<input type="text" name="textfield" id="textfield" />
<img src="test.gif" width="95" height="72" class="nextlink"></div>

    <div id="two"><a href="#">link2</a>
<img src="test.gif" width="95" height="72" class="nextlink">
<input type="text" name="textfield" id="textfield" />
</div>

    <div id="three">Other text</div>
</form>

<script>
  $("img.nextlink").click(function(event) {
  $("div:hidden:first").fadeIn("slow");
 });
</script>


</body>
</html>

Upvotes: 2

Views: 556

Answers (1)

99823
99823

Reputation: 2457

Maybe something like this? The code could used cleaned up but this should get you off to a good start

$("div:first").show();

$("img.nextlink").click(function(event) {
   $(this).parent().hide();
    if ($(this).parent().next("div").length == 0) {
        $("#one").fadeIn("slow");
    }
    else
    {
        $(this).parent().next("div").fadeIn("slow");
    }
});

DEMO: http://jsfiddle.net/CK9H8/

Upvotes: 1

Related Questions