0

我有一个包含内容的#banner，基本上我想做的是显示一定数量的内容，然后有一个更多按钮，如果单击该按钮将显示其余内容。这反过来也会为#banner 的高度设置动画，我已将#banner 高度设置为 300px，但希望找到内容#inner 的高度并相应地对其进行动画处理。目前我有以下版本，但估计我使用了很多#ids / 来达到效果，有人能告诉我如何让它变得更好吗？

在这里小提琴：http: //jsfiddle.net/43gTt/1/

谢谢凯尔

4

1 回答 1

1

我建议您计算 div 的高度inner并使用它来制作动画。

var $tmpInner = inner.clone().appendTo('body');
var divHeight = $tmpInner.outerHeight();
$tmpInner.remove();

下面将根据 div 的内容计算 innerDiv 的高度。

此外，更新了横幅的 css 样式，overflow:hidden以便您不需要为横幅单独设置动画。

演示

CSS：

#banner{background:#dedede;overflow: hidden; }
#outer{margin:0 auto;width:200px;}
#middle{height:200px;overflow:hidden}
#inner{width:200px;margin:0 auto;}
.entry{display:none;}

JS：

$(document).ready(function() {

    var outer = $('#outer'),
        middle = $('#middle'),
        inner = $('#inner'),
        /*innerH = inner.height(),*/
        banner = $('#banner'),
        more = $('#more');

    var $tmpInner = inner.clone().appendTo('body');
    var divHeight = $tmpInner.outerHeight();
    $tmpInner.remove();    

    // animate banner and #middle to reveal additional content
    more.on('click', function(e) {
        middle.animate({
            height: divHeight
        }, 300);

        /*banner.animate({
            height: innerH
        }, 300);*/
    });
});

注意：我不确定你为什么需要这么多包装器 div，但我认为这将是你的 HTML 的一部分。另外，我会将代码清理留给您。

于 2012-04-25T22:30:52.100 回答