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

【问题标题】：causing multiple elements to slide in opposite directions from one click event导致多个元素从一次单击事件中向相反方向滑动
【发布时间】：2011-03-06 20:12:32
【问题描述】：

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

顶部 div 向上滑出视野，底部 div 向下滑出视野甚至更好的顶部 div 向上滑动并停在某个点和底部一个也一样。

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

【问题讨论】：

标签： jquery toggle jquery-animate slide

【解决方案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/

【讨论】：