javascript - 根据点击事件滑动div

Question

一整天都在努力寻找适合我需要的插件或尝试自己构建一些东西。我已经设置了基础，我只是想获得一个很好的平滑过渡，而不是跳到 anchor 。

<!-- 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>

 /* 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%;
}

我要开始工作的只是一组基本按钮，用于控制哪个按钮将从右侧滑入。如果我能让它们根据我正在看的是哪个/我也正在移动哪个来左右滑动，那也是一种奖励。过去几个小时不停地研究，运气不好。

Answer 1

你试过了吗JQuery Cycle ？特别是，this page