我需要为各个方向制作动画，滑动和过渡页面。
我有一个页面，其中一个容器在底部包含三个不同的内部容器，在顶部包含一个。首先是绿色背景色的左侧容器。第二个是红色背景色的中间容器。第三是蓝色背景的正确容器。和顶部容器具有黑色背景色。在中间容器中，我有三个链接。
即“我们是谁”，与我们联系以及我们做什么。
我需要
当我单击“我们是谁”时，左侧容器应向右移动，当我单击“我们是谁”按钮时，左侧容器应向左侧移动。
现在就联系我们链接我需要为底部的中间容器设置动画...
在我们要做的事情上，我需要使用切换效果为左侧的右侧容器设置动画。
这是我的CSS
body
{
width:100%;
height:auto;
}
*{margin:0px; padding:0px;}
.wrapper
{
width:1366px;
height:auto;
margin:0 auto;
overflow:hidden;
}
.contentwrapper
{
width:4098px;
height:665px;
margin-left:-1366px;
float:left;
background:#ccc;
position:relative;
}
.topbox
{
width:1366px;
height:665px;
margin:-665px auto 0px auto;
background:#000;
}
.inner-wrapper
{
width:1366px;
height:665px;
float:left;
}
.bg1
{
background:#9C0;
}
.bg2
{
background:url(../images/back1.jpg) center;
}
.bg3
{
background:#009;
}
.box1
{
width:280px;
height:295px;
float:left;
background:url(../images/logo_line.png) no-repeat;
}
.box2
{
width:280px;
height:295px;
float:left;
background:url(../images/logo_line.png) no-repeat;
}
.box3
{
width:280px;
height:295px;
float:left;
background:url(../images/logo_line.png) no-repeat;
}
这是HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AR</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$("#toright").ready(function(){
var m=0, dir=true;
$("#toright").click(function() {
dir = !dir;
m = dir? -500 : 0;
$(".contentwrapper").stop().animate({right: m+'px'}, 800);
});
});
</script>
<script type="text/javascript">
$("#toleft").ready(function(){
var m=0, dir=true;
$("#toleft").click(function() {
dir = !dir;
m = dir? -500 : 0;
$(".contentwrapper").stop().animate({left: m+'px'}, 800);
});
});
</script>
<script type="text/javascript">
$("#totop").ready(function(){
var m=0, dir=true;
$("#totop").click(function() {
dir = !dir;
m = dir? -500 : 0;
$(".contentwrapper").stop().animate({bottom: m+'px'}, 800);
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="contentwrapper">
<div class="topbox"></div><!--top black box -->
<div class="inner-wrapper bg1"></div><!--left box -->
<div class="inner-wrapper bg2"> <!--middle box -->
<a href="#" class="box1" id="toright"><span>Who We Are</span></a>
<a href="#" class="box2" id="totop"><span>Contact Us</span></a>
<a href="#" class="box3" id="toleft"><span>What We Do</span></a>
</div>
<div class="inner-wrapper bg3"></div> <!--right box -->
</div>
</div>
</body>
</html>
最佳答案
您可以使用jQuery UI toggle（）动画：http://jqueryui.com/toggle/
文件：http://api.jqueryui.com/slide-effect/
关于javascript - 如何在单击时沿上/左/右/下方向滑动div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19099679/