单击按钮后，将重叠的div设置为前面的动画

时间：2015-05-04 00:07:43

标签： javascript jquery html css jquery-animate

这是我的jsfiddle：https://jsfiddle.net/93ce0mkt/

我正在尝试将点击动画的div放到前面。

即。如果调用了第5个div，则调用第3个div，尽管在第5个div之前可以读取第3个div。

HTML 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Hip-Hop Manifesto</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="final.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">

    </script>
    <script src="final.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
</head>

<body>
    <div id="container">
        <div class="navigation">    <span id="div1" class="alink">The Beginning <strong>|</strong>  </span>     <span id="div2" class="alink">New School Hip-Hop <strong>|</strong> </span>
<span id="div3" class="alink">The Golden Age <strong>|</strong> </span>
<span id="div4" class="alink">Gangsta Rap  <strong>|</strong> </span>
<span id="div5" class="alink">90s Hip-Hop  <strong>|</strong></span>
<span id="div6" class="alink">Early 2000s Hip-Hop  <strong>|</strong> </span>
<span id="div7" class="alink">Today in Hip-Hop  <strong>|</strong> </span>
<span id="div8" class="alink">The Future</span>

        </div>
        <div class="title3">Hip-Hop</div>
        <div id="experiment" class="contentdiv">
            <p>Info 1</p>
            <br>
        </div>
        <br>
        <div id="experiment1" class="contentdiv2">
            <p>Info 2</p>
            <br>
        </div>
        <br>
        <div id="experiment2" class="contentdiv">
            <p>Info 3</p>
            <br>
        </div>
        <br>
        <div id="experiment3" class="contentdiv2">
            <p>Info 4</p>
            <br>
        </div>
        <br>
        <div id="experiment4" class="contentdiv">
            <p>Info 5</p>
            <br>
        </div>
        <br>
        <div id="experiment5" class="contentdiv2">
            <p>Info 6</p>
            <br>
        </div>
        <br>
        <div id="experiment6" class="contentdiv">
            <p>Info 7</p>
            <br>
        </div>
        <br>
        <div id="experiment7" class="contentdiv2">
            <p>Info 8</p>
            <br>
        </div>
        <br>
    </div>
</body>

CSS 

    body{
    background-color: #201C1D;
    margin: auto;
    overflow-x: hidden;
    color: white;
}

#container{

}
.title {
    font-family: "Impact";
    font-size: 120px;
    text-align: center;
    position: absolute;
    top: 80px;
    width: 465px;
    left: 680px;
    border-style: solid;
    padding: 20px;
    letter-spacing: -5px;


}
.title2 {

    font-size: 30px;
    text-align: center;
    position: relative;
    top: 350px;
    left: 0px;
    font-family: 'Roboto Condensed', sans-serif;
    line-height: 180%;
}
.title3{
    font-family: "Impact";
    font-size: 40px;
    text-align: center;
    position: absolute;
    top: 40px;
    width: 116px;
    left: 895px;
    border-style: solid;
    padding: 20px;
    letter-spacing: -2px;
}
.navigation{
    text-align: center;
    font-size: 20px;
    position: absolute;
    left: 400px;
    top: 170px;
    font-family: 'Roboto Condensed', sans-serif;
}
#experiment{
    background-color: black;
    border-style: solid;
    z-index: 100%;

}
#experiment1{
    background-color: black;
    border-style: solid;
    border-color: white;
}
#experiment2 {
    background-color: black;
    border-style: solid;
    border-color: white;
}
#experiment3 {
    background-color: black;
    border-style: solid;
    border-color: white;
}
#experiment4 {
    background-color: black;
    border-style: solid;
    border-color: white;
}
#experiment5 {
    background-color: black;
    border-style: solid;
    border-color: white;
}
#experiment6 {
    background-color: black;
    border-style: solid;
    border-color: white;
}
#experiment7 {
    background-color: black;
    border-style: solid;
    border-color: white;
}
.contentdiv {
    width: 700px;
    height: 500px;
    top: 320px;
    color: white;
    font-size: 16px;
    font-family: sans-serif;
    padding: 15px;
    position: absolute;
    text-align: center;
    left: -1100px;
    font-family: 'Raleway', sans-serif;
    line-height: 200%;
}
.contentdiv2 {
    width: 700px;
    height: 500px;
    top: 320px;
    color: white;
    font-size: 16px;
    font-family: sans-serif;
    padding: 15px;
    position: absolute;
    text-align: center;
    left: 2000px;
    font-family: 'Raleway', sans-serif;
    line-height: 200%;
}
.contentdivauto {
    width: 700px;
    height: auto;
    top: 320px;
    color: white;
    font-size: 16px;
    font-family: sans-serif;
    padding: 15px;
    position: absolute;
    text-align: center;
    left: 2000px;
    font-family: 'Raleway', sans-serif;
    line-height: 220%;
}
.alink:hover {
    cursor: pointer;
    font-size: 23px;


}
a:hover{
    text-decoration:none;
    color: white;
}
a:link{
    text-decoration: none;
    color: white;
}
a:visited{
    text-decoration: none;
    color: white;
}

的Javascript 

$(document).ready(function () {
$("#div1").click(function () {
    $(".contentdiv").css("left", "-1400px");
    $("#experiment").animate({
        "left": "600px"
    }, 1000);
});

$("#div2").click(function () {
    $(".contentdiv2").css("left", "2000px");
    $("#experiment1").animate({
        "left": "600px"
    }, 1000);
});

$("#div3").click(function () {
    $(".contentdiv").css("left", "-1400px");
    $("#experiment2").animate({
        "left": "600px"
    }, 1000);
});

$("#div4").click(function () {
    $(".contentdiv2").css("left", "2000px");
    $("#experiment3").animate({
        "left": "600px"
    }, 1000);
});

$("#div5").click(function () {
    $(".contentdiv").css("left", "-1400px");
    $("#experiment4").animate({
        "left": "600px"
    }, 1000);

});
$("#div6").click(function () {
    $(".contentdiv2").css("left", "2000px");
    $("#experiment5").animate({
        "left": "600px"
    }, 1000);
});

$("#div7").click(function () {
    $(".contentdiv").css("left", "-1800px");
    $("#experiment6").animate({
        "left": "600px"
    }, 1000);
});

$("#div8").click(function () {
    $(".contentdiv2").css("left", "2000px");
    $("#experiment7").animate({
        "left": "600px"
    }, 1000);
});

2 个答案:

答案 0 :(得分：0)

我会使用z-index将点击的框放在顶部。这样的事情（仅给出前两个div的例子，但你明白了）：

$("#div1").click(function () {
    $("#experiment").css("left", "-1400px");
    $(".contentdiv").css("z-index", "0");
    $("#experiment").css("z-index", "50");
    $("#experiment").animate({
        "left": "600px"
    }, 1000);
});

$("#div2").click(function () {
    $("#experiment1").css("left", "-1400px");
    $(".contentdiv").css("z-index", "0");
    $("#experiment1").css("z-index", "50");
    $("#experiment1").animate({
        "left": "600px"
    }, 1000);
});

您需要为这项工作提供所有.contentdiv课程，请注意每个函数的第二行将所有div重置为z-index: 0;。

答案 1 :(得分：0)

我设法通过在每次点击时递增当前div的zIndex来解决您的问题。

＆＃13;
＆＃13; 
	
var zIndex = 0;

$(document).ready(function() {

$("#div1").click(function() {
    zIndex += 1;
    $(".contentdiv").css("left", "-1400px");
    $('.contentdiv').css('zIndex', zIndex);
    $("#experiment").animate({
        "left": "600px"
    }, 1000);
});

$("#div2").click(function() {
    zIndex += 1;
    $(".contentdiv2").css("left", "2000px");
    $('.contentdiv2').css('zIndex', zIndex);
    $("#experiment1").animate({
        "left": "600px"
    }, 1000);
});

$("#div3").click(function() {
    zIndex += 1;
    $(".contentdiv").css("left", "-1400px");
    $('.contentdiv').css('zIndex', zIndex);
    $("#experiment2").animate({
        "left": "600px"
    }, 1000);
});

$("#div4").click(function() {
    zIndex += 1;
    $(".contentdiv2").css("left", "-1400px");
    $('.contentdiv2').css('zIndex', zIndex);
    $("#experiment3").animate({
        "left": "600px"
    }, 1000);
});

$("#div5").click(function() {
    zIndex += 1;
    $(".contentdiv").css("left", "-1400px");
    $('.contentdiv').css('zIndex', zIndex);
    $("#experiment4").animate({
        "left": "600px"
    }, 1000);

});
$("#div6").click(function() {
    zIndex += 1;
    $(".contentdiv2").css("left", "2000px");
    $('.contentdiv2').css('zIndex', zIndex);
    $("#experiment5").animate({
        "left": "600px"
    }, 1000);
});

$("#div7").click(function() {
    zIndex += 1;
    $(".contentdiv").css("left", "-1800px");
    $('.contentdiv').css('zIndex', zIndex);
    $("#experiment6").animate({
        "left": "600px"
    }, 1000);
});

$("#div8").click(function() {
    zIndex = zIndex + 1;
    $(".contentdiv2").css("left", "2000px");
    $('.contentdiv2').css('zIndex', zIndex);
    $("#experiment7").animate({
        "left": "600px"
    }, 1000);
});


});
＆＃13; 
body {
    background-color: #201C1D;
    margin: auto;
    overflow-x: hidden;
    color: white;
}
#container {
}
.title {
    font-family:"Impact";
    font-size: 120px;
    text-align: center;
    position: absolute;
    top: 80px;
    width: 465px;
    left: 680px;
    border-style: solid;
    padding: 20px;
    letter-spacing: -5px;
}
.title2 {
    font-size: 30px;
    text-align: center;
    position: relative;
    top: 350px;
    left: 0px;
    font-family:'Roboto Condensed', sans-serif;
    line-height: 180%;
}
.title3 {
    font-family:"Impact";
    font-size: 40px;
    text-align: center;
    position: absolute;
    top: 40px;
    width: 116px;
    left: 895px;
    border-style: solid;
    padding: 20px;
    letter-spacing: -2px;
}
.navigation {
    text-align: center;
    font-size: 20px;
    position: absolute;
    left: 400px;
    top: 170px;
    font-family:'Roboto Condensed', sans-serif;
}
#experiment {
    background-color: black;
    border-style: solid;
    border-color: white;
}
#experiment1 {
    background-color: black;
    border-style: solid;
    border-color: white;
}
#experiment2 {
    background-color: black;
    border-style: solid;
    border-color: white;
}
#experiment3 {
    background-color: black;
    border-style: solid;
    border-color: white;
}
#experiment4 {
    background-color: black;
    border-style: solid;
    border-color: white;
}
#experiment5 {
    background-color: black;
    border-style: solid;
    border-color: white;
}
#experiment6 {
    background-color: black;
    border-style: solid;
    border-color: white;
}
#experiment7 {
    background-color: black;
    border-style: solid;
    border-color: white;
}
.contentdiv {
    width: 700px;
    height: 500px;
    top: 320px;
    color: white;
    font-size: 16px;
    font-family: sans-serif;
    padding: 15px;
    position: absolute;
    text-align: center;
    left: -1100px;
    font-family:'Raleway', sans-serif;
    line-height: 200%;
}
.contentdiv2 {
    width: 700px;
    height: 500px;
    top: 320px;
    color: white;
    font-size: 16px;
    font-family: sans-serif;
    padding: 15px;
    position: absolute;
    text-align: center;
    left: 2000px;
    font-family:'Raleway', sans-serif;
    line-height: 200%;
}
.contentdivauto {
    width: 700px;
    height: auto;
    top: 320px;
    color: white;
    font-size: 16px;
    font-family: sans-serif;
    padding: 15px;
    position: absolute;
    text-align: center;
    left: 2000px;
    font-family:'Raleway', sans-serif;
    line-height: 220%;
}
.alink:hover {
    cursor: pointer;
    font-size: 23px;
}
a:hover {
    text-decoration:none;
    color: white;
}
a:link {
    text-decoration: none;
    color: white;
}
a:visited {
    text-decoration: none;
    color: white;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
    
    <head>
        <title>Hip-Hop Manifesto</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="final.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
            
        </script>
        <script src="final.js"></script>
        <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
    </head>
    
    <body>
        <div id="container">
            <div class="navigation">
	<span id="div1" class="alink">The Beginning <strong>|</strong>  </span> 
	<span id="div2" class="alink">New School Hip-Hop <strong>|</strong></span>
	<span id="div3" class="alink">The Golden Age <strong>|</strong> </span>
	<span id="div4" class="alink">Gangsta Rap  <strong>|</strong> </span>
	<span id="div5" class="alink">90s Hip-Hop  <strong>|</strong></span>
	<span id="div6" class="alink">Early 2000s Hip-Hop  <strong>|</strong> </span>
	<span id="div7" class="alink">Today in Hip-Hop  <strong>|</strong> </span>
	<span id="div8" class="alink">The Future</span>
            </div>
			
            <div class="title3">Hip-Hop</div>
			
            <div id="experiment" class="contentdiv">
                <p>Info 1</p>
                <br>
            </div>
            <br>
            <div id="experiment1" class="contentdiv2">
                <p>Info 2</p>
                <br>
            </div>
            <br>
            <div id="experiment2" class="contentdiv">
                <p>Info 3</p>
                <br>
            </div>
            <br>
            <div id="experiment3" class="contentdiv2">
                <p>Info 4</p>
                <br>
            </div>
            <br>
            <div id="experiment4" class="contentdiv">
                <p>Info 5</p>
                <br>
            </div>
            <br>
            <div id="experiment5" class="contentdiv2">
                <p>Info 6</p>
                <br>
            </div>
            <br>
            <div id="experiment6" class="contentdiv">
                <p>Info 7</p>
                <br>
            </div>
            <br>
            <div id="experiment7" class="contentdiv2">
                <p>Info 8</p>
                <br>
            </div>
            <br>
        </div>
		

    </body>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题