Question

我正在尝试创建一个简单的页面，其中3个div与各种内容相互重叠。在每个DIV中是一个图像（一个NEXT按钮），它应该淡出最初显示的DIV，并淡出第二个DIV。在第二个DIV中，是FadeOut DIV 2和FadeIn DIV 3的另一个NEXT按钮。

我在隐藏之前显示的DIV时遇到问题，并且所有3个人最终都将所有内容显示在彼此之上。

请帮助：

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

Answer 1

也许是这样的？代码可以使用清理，但这应该让你有一个良好的开端

$("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/

JQuery淡出/隐藏以前的DIVS

1 个答案: