Javascript 基于单击事件的滑动div

为了找到一个适合我需要的插件，或者是为了自己构建一些东西，我一整天都被难住了。我已经做好了基本的准备，我只是想得到一个很好的平稳过渡，而不是跳转到锚

<!-- HTML -->
<div id="content-container">
    <div class="slide" id="home">

    </div>
    <div class="slide" id="about">

    </div>
    <div class="slide" id="musings">

    </div>
    <div class="slide" id="socials">

    </div>
    <div class="slide" id="contact">

    </div>

---

我所要做的就是用一组基本的按钮来控制哪一个从右边滑入。如果我能让他们根据我正在看的/我也在移动的那一个左右滑动，那也将是一个奖励。在过去的几个小时里没有运气不停地研究。

你试过了吗？特别是，

如果您想要更好的答案，我建议您设置一个JSFIDDLUDED，没有人有足够的时间来仔细检查您的代码@用户3011961学习扫描阅读。很简单，所有的问题都是：我想要一个JQuery插件，它可以执行X、Y和Z。简单！chirp@JamieBarker谢谢你，我不想浪费时间

 /* CSS */
#content-container{
    height: 100%;
    width: 500%;
}
#home{   
    background: url(assets/slide1.gif) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: 0;
}
#about{   
    background: url(assets/slide2.gif) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: 1;
}
#musings{   
    background: url(assets/slide3.gif) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: 2;
}
#socials{   
    background: url(assets/slide4.gif) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: 3;
}
#contact{   
    background: url(assets/slide5.gif) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: 4;
}
.slide{
    height: 100%;
    width: 20%;
}