jquery - 一键点击； Divs 以相反方向打开

Question

我想知道是否有办法在JQuery中实现这种效果。最近，一位 stackoverflow 用户帮助我实现了我想要的效果；现在我想使用 JQuery 并以尽可能最有效的方式来完成它。这是 fiddle 的链接，可以更好地解释我想要实现的目标:

http://jsfiddle.net/itsbc/U3Lg9/11/

当前版本运行有点不稳定。我正在寻找更流畅的东西，例如:

http://jsfiddle.net/itsbc/QchfJ/

提前致谢，BC。

Answer 1

正如评论部分中的其他人所建议的那样，您在性能方面的表现会更好..如果只是幻灯片动画..您应该简单地坚持您所拥有的..

但是你真正想要的是slideDown动画+隐藏效果。通常幻灯片动画是为了显示元素..所以你需要做一些小技巧来让它工作..见下文，

CSS:

#hider1 { 
   position:fixed; /* Changed style*/
   top: 0px;       
   background: black;
   width:100%;
   height:48%;
   min-height:0px;
   text-align:center;
   color:white; 
}

#hider2 { 
   background-color:black;
   width:100%;
   height:50%;
   text-align:center;
   position:fixed;  /* Changed style*/
   bottom:0;        /* Changed style*/
   color:white; 
}

JS:

$(function () {
    $('#test').on('click', function () {
        $('#hider1').animate({            
            height: 0,
            opacity: 0.2 //<-- Fancy stuff
         },1000 );

        $('#hider2').animate({            
            height: 0,
            opacity: 0.2 //<-- Fancy stuff
         },1000 );

    });
});

​
<强> DEMO -> 在 FF 和 Chrome 中经过验证。