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

Question

我有一个‘介绍’页面，我正在创建，我想要点击中间的一个按钮，导致两个div滑动

顶部的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
       });
   });
});

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

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