Javascript 同时滑入和滑出页面视图

我对javascript相当陌生。我改编了一些脚本，我发现做了一些类似于我所需要的，但它不是我喜欢的工作。我为冗长的解释道歉

我有6个按钮，按钮1-3负责左边的div，按钮4-6负责右边的div

脚本运行时，所有div都不应可见

单击按钮#1时，div#1从左侧滑出，然后从容器左侧定位其自身宽度。对应于按钮2和按钮3的div#2和div#3也是如此。一次只能看到一个div，因此按钮2将隐藏div#1和div#3并显示div#2等。所有其他按钮也是如此

单击按钮#4时，div#4从右侧滑出，并从容器右侧定位其自身宽度。单击另一个按钮时隐藏的div与上述相同，一次只能看到1个div

非常感谢您的帮助

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">




$(window).load(function(){

   $('.button-left').click(function() {
    var index = $(this).index(".button-left");
    var $box = $(".box-left:eq(" + index + ")");

    $(".box-left").not($box).animate({
        left: '150%'
    }, 500);

    if ($box.offset().left < 0) {
        $box.css("left", "150%");
    } else if ($box.offset().left > $('#container').width()) {
        $box.animate({
            left: '25%',
        }, 500);
    }
});

    $('.button-right').click(function() {
    var index = $(this).index(".button-right");
    var $box = $(".box-right:eq(" + index + ")");

    $(".box-right").not($box).animate({
        left: '150%'
    }, 500);

    if ($box.offset().left < 0) {
        $box.css("left", "150%");
    } else if ($box.offset().left > $('#container').width()) {
        $box.animate({
            left: '105%',
        }, 500);
    }
});
});




</script>
<style type="text/css">
#container {
    position: absolute;
    margin: 0px;
    margin-left:auto;
    margin-right:auto;
    padding: 0px;
    width:1024px;
    height:568px;
    overflow: hidden;
    background-color:#999999;
}

.box-left {
    position: absolute;
    width: 200px;
    height: 300px;
    line-height: 300px;
    font-size: 50px;
    text-align: center;
    border: 2px solid black;
    left: 150%;
    top: 100px;
    margin-left: -25%;
}

.box-right {
    position: absolute;
    width: 200px;
    height: 300px;
    line-height: 300px;
    font-size: 50px;
    text-align: center;
    border: 2px solid black;
    top: 100px;
    margin-left: -25%;

}

#box1 {
    background-color: green;
    left:260px;
}

#box2 {
    background-color: yellow;
}

#box3 {
    background-color: red;
}

#box4 {
    background-color: orange;
    right:0px;
}

#box5 {
    background-color: purple;
}

#box6 {
    background-color: brown;
}
</style>



<div class="button-left"><a href="#">Click Box #1</a> </div>
<div class="button-left"><a href="#">Click Box #2</a> </div>
<div class="button-left"><a href="#">Click Box #3</a> </div>

<div class="button-right"><a href="#">Click Box #4</a> </div>
<div class="button-right"><a href="#">Click Box #5</a> </div>
<div class="button-right"><a href="#">Click Box #6</a> </div>


<div id="container">

    <div id="box1" class="box-left">Box #1</div>
    <div id="box2" class="box-left">Box #2</div>
    <div id="box3" class="box-left">Box #3</div>
    <div id="box4" class="box-right">Box #4</div>
    <div id="box5" class="box-right">Box #5</div>
    <div id="box6" class="box-right">Box #6</div>

</div>

$（窗口）。加载（函数（）{
$（'.button left'）。单击（函数（）{
var index=$（此）.index（“.button left”）；
var$box=$（“.box左：等式（“+index+”））；
$（“.box left”）。不是（$box）。设置动画({
左：“150%”
}, 500);
如果（$box.offset（）.left<0）{
$box.css（“左”、“150%”）；
}else if（$box.offset（）.left>$（“#容器”）.width（））{
$box.animate({
左：25%，
}, 500);
}
});
$（'.button right'）。单击（函数（）{
var index=$（this.index（“.button right”）；
var$box=$（“.box right:eq（“+index+”）；
$（“.box right”）。不是（$box）。设置动画({
左：“150%”
}, 500);
如果（$box.offset（）.left<0）{
$box.css（“左”、“150%”）；
}else if（$box.offset（）.left>$（“#容器”）.width（））{
$box.animate({
左：105%，
}, 500);
}
});
});
#容器{
位置：绝对位置；
边际：0px；
左边距：自动；
右边距：自动；
填充：0px；
宽度：1024px；
高度：568px；
溢出：隐藏；
背景色：#999999；
}
.左框{
位置：绝对位置；
宽度：200px；
高度：300px；
线高：300px；
字体大小：50px；
文本对齐：居中；
边框：2件纯黑；
左：150%；
顶部：100px；
左边缘：-25%；
}
.右框{
位置：绝对位置；
宽度：200px；
高度：300px；
线高：300px；
字体大小：50px；
文本对齐：居中；
边框：2件纯黑；
顶部：100px；
左边缘：-25%；
}
#框1{
背景颜色：绿色；
左：260px；
}
#框2{
背景颜色：黄色；
}
#框3{
背景色：红色；
}
#方框4{
背景颜色：橙色；
右：0px；
}
#方框5{
背景颜色：紫色；
}
#方框6{
背景颜色：棕色；
}
方框#1
方框#2
方框#3
方框4
方框5
方框6

这是我认为你想要的东西。只需要简单的jquery动画功能来左右滑动，以及一个简单的菜单来选择项目

希望这有帮助

这是我认为你想要的东西。只需要简单的jquery动画功能来左右滑动，以及一个简单的菜单来选择项目

---

希望这有帮助

谢谢你的回答。这不是我想要实现的：）@未定义你能帮我吗？看起来怎么样？这就是你想要达到的目标吗？这里的全屏结果导致右侧选项卡在多框内容上显示不太好。我应该补充一点，这依赖于jQuery。我希望这不是乔治·威尔逊的问题。在这个例子中：jsfiddle.net/KFqvf，基本上就是这样，它应该滑入滑出，而不是褪色。我将如何修改代码来实现这一点？@Charl这更像是吗？（再次显示结果）。基本上在jquery中使用了动画功能，而不是淡入淡出谢谢你的回答。这不是我想要实现的：）@未定义你能帮我吗？看起来怎么样？这就是你想要达到的目标吗？这里的全屏结果导致右侧选项卡在多框内容上显示不太好。我应该补充一点，这依赖于jQuery。我希望这不是乔治·威尔逊的问题。在这个例子中：jsfiddle.net/KFqvf，基本上就是这样，它应该滑入滑出，而不是褪色。我将如何修改代码来实现这一点？@Charl这更像是吗？（再次显示结果）。基本上是在jquery中使用动画功能，而不是淡入淡出。我建议您创建一个动画，而不是要求社区尝试解析一堆文本和一堆代码。谢谢。我建议你创建一个新的社区，而不是要求社区尝试解析一堆文本和代码。谢谢