例子:http://mattharris.org/index2.html
一切都很好,直到我开始动态移动元素。例如,单击底部的任何一个div,您将看到文本移动不正确。
我做错了什么?
谢谢!
HTML:
<div class="container">
<div class="header">
<h1 class="title">MattHarris dot Com</h1>
</div>
<div class="sepbar"></div>
<div class="wrapper">
<div class="content">
<div class="box">
<div class="vertical-text">Skills</div>
</div>
<div class="box">
<div class="vertical-text">Resume</div>
</div>
<div class="box">
<div class="vertical-text">Contact</div>
</div>
</div>
</div>
<div class="sepbar"></div>
</div>
CSS:
.box {
width: 33.3%;
height: 100%;
float: left;
font-size: 2em;
cursor: pointer;
filter: alpha(opacity=80);
opacity: 0.8;
}
.vertical-text {
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
text-transform: uppercase;
width: 4%;
}
.box:hover {
filter: alpha(opacity=100);
opacity: 1.0;
}
.box:nth-child(1) { background-color: #9dc9d2; }
.box:nth-child(2) { background-color: #a8cfd7; }
.box:nth-child(3) { background-color: #b3d5dc; }
JS:
$(".box").click(function() {
var link = $(this).text().toLowerCase();
link = link.replace(/^\s+/, '');
link = link.replace(/\s+$/, '');
switch(link) {
case "skills":
$(".box:nth-child(1)").animate({width:"92%"});
$(".box:nth-child(2)").animate({width:"4%"});
$(".box:nth-child(3)").animate({width:"4%"});
break;
case "resume":
$(".box:nth-child(1)").animate({width:"4%"});
$(".box:nth-child(2)").animate({width:"92%"});
$(".box:nth-child(3)").animate({width:"4%"});
break;
case "contact":
$(".box:nth-child(1)").animate({width:"4%"});
$(".box:nth-child(2)").animate({width:"4%"});
$(".box:nth-child(3)").animate({width:"92%"});
break;
}
});