一键; Div在相反方向打开

Question

我想知道是否有办法在JQuery中实现这种效果。一个*用户最近帮助我实现了我要去的效果;现在我想用最有效的方式使用JQuery。下面是小提琴的链接的我在寻找什么，以实现更好的解释：

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

当前版本的运行有些不连贯。提前

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

谢谢，BC：我正在寻找的东西有点光滑，像这样的。

Answer 1

至于其他的注释部分建议，你是你在性能方面的..如果只是幻灯片动画..你应该简单地坚持你有什么更好..

但是你真正想要的是slideDown animation + hide effect。通常了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中验证。

Answer 2

不使用jQuery可能已经比使用它更有效率。

也许你真正想改变它的原因是对动画有更多的控制（例如，对动画的速度或缓动）。如果是这样的话，试试这个：

http://jsfiddle.net/U3Lg9/13/

Answer 3

好了，我把你的现有代码和重构它一点。 jQuery调用将如此简单。

$("#opener").click(function() { 
    myApp.websiteOpener.displayWebsite('hider1', 'hider2'); 
}); 

然后，从那里你将有一个单独的文件包含所需的代码。

var myApp = {}; 
myApp.websiteOpener = { 

    up: null, 
    down: null, 
    topPanel: null, 
    bottomPanel: null, 

    displayWebsite: function(tPanel, bPanel) { 
     if (typeof up !== "undefined") return; 
     topPanel = tPanel; 
     bottomPanel = bPanel; 
     up = setInterval(this.goUp, 2); 
     down = setInterval(this.goDown, 2); 
    }, 

    goUp: function(x) { 
     var h1 = document.getElementById(this.topPanel); 
     if (h1.offsetHeight <= 0) { 
      clearInterval(up); 
      return; 
     } 
     h1.style.height = parseInt(h1.style.height) - 1 + "%"; 
    }, 

    goDown: function(x) { 
     var h2 = document.getElementById(this.bottomPanel); 
     if (h2.offsetHeight <= 0) { 
      clearInterval(down); 
      return; 
     } 
     h2.style.top = parseInt(h2.style.top) + 1 + "%"; 
     h2.style.height = parseInt(h2.style.height) - 1 + "%"; 
    } 
};​ 

Try it for yourself