Javascript 如何在单击时沿上/左/右/下方向滑动div_Javascript_Jquery_Css

Javascript 如何在单击时沿上/左/右/下方向滑动div

javascript jquery css

Javascript 如何在单击时沿上/左/右/下方向滑动div,javascript,jquery,css,Javascript,Jquery,Css,我需要动画，幻灯片，过渡到所有方向的网页我有一个页面，其中一个容器底部包含三个不同的内部容器，顶部包含一个。首先是以绿色背景色显示的左侧容器。第二个是红色背景色的中间容器。第三个是蓝色背景色的正确容器。顶部容器有黑色背景色。在中间容器我有三个环节。这就是“我们是谁”，联系我们，我们做什么我需要当我点击我们是谁。。。当我点击“我们是谁”按钮时，左边的容器应该向右边移动，然后再次移动。。。左侧容器应设置为左侧动画现在在“联系我们”链接上，我需要在底部设置中间容器的动画。。。带拨动盒在我们

我需要动画，幻灯片，过渡到所有方向的网页

我有一个页面，其中一个容器底部包含三个不同的内部容器，顶部包含一个。首先是以绿色背景色显示的左侧容器。第二个是红色背景色的中间容器。第三个是蓝色背景色的正确容器。顶部容器有黑色背景色。在中间容器我有三个环节。这就是“我们是谁”，联系我们，我们做什么

我需要

当我点击我们是谁。。。当我点击“我们是谁”按钮时，左边的容器应该向右边移动，然后再次移动。。。左侧容器应设置为左侧动画

现在在“联系我们”链接上，我需要在底部设置中间容器的动画。。。带拨动盒

在我们所做的事情中，我需要用切换效果在左侧设置右容器的动画

这是我的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>


应收账
$（“#toright”）.ready（函数（）{
var m=0，dir=true；
$（“#toright”）。单击（函数（）{
dir=！dir；
m=dir-500:0；
$（“.contentwrapper”）.stop（）.animate（{right:m+'px'}，800）；
});
});
$（“#toleft”）.ready（函数（）{
var m=0，dir=true；
$（“#toleft”）。单击（函数（）{
dir=！dir；
m=dir-500:0；
$（“.contentwrapper”）.stop（）.animate（{left:m+'px'}，800）；
});
});
$（“#totop”）.ready（函数（）{
var m=0，dir=true；
$（“#totop”）。单击（函数（）{
dir=！dir；
m=dir-500:0；
$（“.contentwrapper”）.stop（）.animate（{bottom:m+'px'}，800）；
});
});

您可以使用jQuery UI toggle（）动画：

文档：

为什么每个函数都包含在它自己的

标签中？谢谢@tekoyaki，但当我点击按钮时，切换效果完全隐藏了一个容器