0

我需要动画，滑动，向各个方向过渡页面。

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

我需要

当我点击我们是谁时...当我单击我们是谁按钮时，左侧容器应该向右侧设置动画...左侧容器应该向左侧设置动画。

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

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

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

1 回答 1

0

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

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

于 2013-09-30T23:44:24.200 回答