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

【问题标题】：how to slide a div in top/left/right/bottom direction on click单击时如何在上/左/右/下方向滑动div
【发布时间】：2013-09-30 16:55:43
【问题描述】：

我需要动画、滑动、向各个方向转换页面。

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

我需要

当我点击我们是谁时...当我点击我们是谁按钮时，左边的容器应该向右移动，然后再一次......左边的容器应该向左侧移动。

现在联系我们链接我需要为底部的中间容器设置动画...带有切换案例

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

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

【问题讨论】：

为什么每个函数都包含在它自己的<script> 标签中？

标签： javascript jquery css

【解决方案1】：

您可以使用 jQuery UI toggle() 动画：http://jqueryui.com/toggle/

文档：http://api.jqueryui.com/slide-effect/

【讨论】：

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