2

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

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

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

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

在此先感谢，BC。

4

3 回答 3

1

好的，所以我采用了您现有的代码并对其进行了一些重构。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 + "%";
    }
};​

自己试试

于 2012-05-23T21:50:42.657 回答
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 );

    });
});

​<br> DEMO -> 已在 FF 和 Chrome 中验证。

于 2012-05-23T21:30:48.003 回答
0

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

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

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

于 2012-05-23T21:49:12.200 回答