Jquery 滑动左隐藏div，滑动右活动div_Jquery_Hidden_Absolute_Parallax_Sliding

Jquery 滑动左隐藏div，滑动右活动div

jquery

Jquery 滑动左隐藏div，滑动右活动div,jquery,hidden,absolute,parallax,sliding,Jquery,Hidden,Absolute,Parallax,Sliding,我有一系列的div，第一个是活动的，显示带有链接的欢迎屏幕。其他是隐藏的divs绝对位置左：-100%这些也将包含链接我需要这样做，当用户点击一个链接时，当前的div会平滑地从左侧滑出，而新内容会平滑地从右侧滑入视差滑动对我不起作用，因为你可以从一张幻灯片导航到另一张幻灯片，但我不希望网站滚动所有幻灯片以到达目标容器。在到达请求的内容之前，我只希望有一个滚动序列我所看到的大部分内容似乎都是滚动脚本，这些脚本与浮动div一起工作，因此，如果您单击链接3，您将在1、2、3之间滑动。我需要错过

我有一系列的div，第一个是活动的，显示带有链接的欢迎屏幕。其他是隐藏的divs绝对位置左：-100%这些也将包含链接

我需要这样做，当用户点击一个链接时，当前的div会平滑地从左侧滑出，而新内容会平滑地从右侧滑入

视差滑动对我不起作用，因为你可以从一张幻灯片导航到另一张幻灯片，但我不希望网站滚动所有幻灯片以到达目标容器。在到达请求的内容之前，我只希望有一个滚动序列

我所看到的大部分内容似乎都是滚动脚本，这些脚本与浮动div一起工作，因此，如果您单击链接3，您将在1、2、3之间滑动。我需要错过中间的东西！我希望这是有道理的

如果可能的话，我想动态加载幻灯片的内容？？但我对那件事完全不知所措

这是我到目前为止得到的代码

这几乎是我所需要的，但正如你所看到的，所有的幻灯片都同时被调用！非常感谢所有的帮助

html, body{
width:100%;
height:100%;
padding:0px;
margin:0px; 
overflow: hidden; 
}
.wrapper {
position: absolute;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;  
}
.slide{
position: absolute;
width: 200%;
height: 100%;
font-size: 30px;
text-align: center;
border: 2px solid black;
left: 100%;
top:0px;
}
.navigation{
font-size:14px;
}
.navigation a{
display:block;
background-color:#000;
color:#fff;
padding:5px;
float:left;
margin-right:5px;
}
#slide1{
background-color:#000;
background-image:url(images/BG1.jpg);
background-position:center top;
background-repeat:no-repeat;
width:100%;
left: 0%;
}
.inner{
width:960px;
height:800px;
background-color:#fff;
margin-left:auto;
margin-right:auto;
position:relative;
}
#slide2{
background-color:#090;

}
#slide3{
background-color:#F30;
}
.content{
width:30%;
height:80%;
float:right;
background-color:#fff;
margin:10%;
}

</style>

</head>

<body>
<div class="wrapper">

<div class="slide" id="slide1">
<div class="inner">
   WELCOME CONTENT HERE
</div>
</div>

<div class="slide" id="slide2">
<div class="content">
      <div>SLIDE 2 DYNAMIC CONTENT LOADS HERE</div>
      <div class="navigation">
      <a class="button">LINK TO SLIDE 3</a>
      <a class="button">LINK TO SLIDE 4</a>
      <a class="button">LINK TO SLIDE 5</a>
      <a class="button">LINK TO SLIDE 6</a>
      <a class="button">LINK TO SLIDE 7</a>
      <a class="button">LINK TO SLIDE 8</a>
      </div>
</div>
</div>

<div class="slide" id="slide3">
<div class="content">
      <div>SLIDE 3 DYNAMIC CONTENT LOADS HERE</div>
      <div class="navigation">
      <a class="button">BACK TO SLIDE 2</a>
      <a class="button">LINK TO SLIDE 4</a>
      <a class="button">LINK TO SLIDE 5</a>
      <a class="button">LINK TO SLIDE 6</a>
      <a class="button">LINK TO SLIDE 7</a>
      <a class="button">LINK TO SLIDE 8</a>
      </div>
</div>
</div>
</div>

我已经更新了我的解决方案，并将其发布在JSFIDLE中。我还没有完成解决方案，但按钮2和按钮3的工作

})

它没有jquery ajax加载内容，我稍后有时间会把它放进去。

您好，我已经尝试了您的建议，但现在什么都没有发生。如果您可以在JSFIDLE中实现，那将是一个很大的帮助！我是一个新手，所以除了我的道歉，如果这似乎是一个简单的修复！此外，每次加载新幻灯片时，您的建议是否会滑出当前的显示div？再次感谢您的帮助！好的，我想我修复了建议中的一个小错误$动画{left:'-100%}，1000；}；返回false；}；我已经让幻灯片2工作了，但是，它似乎在当前内容上滑动，而不是将其推到左边？？如果我在幻灯片3上，我如何才能让幻灯片2从左边滑回？哦，好吧，我知道你想要什么，我会修改我的解决方案，并在晚上有时间时在JSFIDLE上实现它。对不起，我现在没有时间。别担心！非常感谢你的帮助！我会继续检查更新。提前谢谢！

$('.button2').click(function() {
    var thisElement = $('#slide2')[0]
    var previousElement = thisElement.previousElementSibling;

    $(previousElement).animate({
            left: '-100%',
        }, 1000 );

        $(thisElement).animate({
            left: '0%',
        }, 1000 );