这是我的 jsfiddle:https://jsfiddle.net/93ce0mkt/
我正在尝试使单击的任何 div 动画到前面。
即如果调用第 5 个 div，则调用第 3 个 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);
});
最佳答案
我会使用 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; .
关于javascript - 单击按钮后使重叠的 div 动画到前面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30020851/