Question

我想知道是否有办法在JQuery中实现这种效果。 stackoverflow用户最近帮助我实现了我想要的效果;现在我想使用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 - ＆gt;在FF和Chrome中验证。

Answer 2

好的，所以我拿走了你现有的代码并稍微重构了一下。 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

Answer 3

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

也许你真正想要改变它的原因是对动画有更多的控制（例如，超过动画的速度或缓和）。如果是这种情况，请尝试：

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

一键;分区在相反的方向开放

3 个答案: