通过一次单击事件导致多个元素向相反方向滑动

Question

我正在创建一个“介绍”页面，我想单击中间的一个按钮，这会导致两个 div 滑动，

顶部 div 向上滑动到视图之外，底部 div 向下滑动到视图之外 或者更好的是顶部 div 向上滑动并停在某个点，底部则停止 一个人也这样做。

如何才能实现这一目标？我环顾四周，我对 javascript 很陌生，所以 我只需要一个准确的例子。请不要只是说，使用 .bind() 方法！ 因为我不明白如何实现

Answer 1

使用动画功能：

$(document).ready(function(){
   $('#yourButtonId').click(function(){
      $('#yourTopDivId').animate({
          //css properties - specify new position with css
          top: '0px',
          left: '20px'
      },5000  // animation will run for 5 seconds
      ,function(){
       // what should happen when it's done goes here
       });
   });
   $('#yourButtonId').click(function(){
      $('#yourBottomDivId').animate({
          //css properties - specify new position with css
          bottom: '0px',
          left: '20px'
      },5000  // animation will run for 5 seconds
      ,function(){
       // what should happen when it's done goes here
       });
   });
});

我还没有测试过它，但它应该可以工作。

//编辑
我现在已经测试过了。这是链接：http://jsfiddle.net/ZCh9x/