关于如何最好地揭示基于内容高度的额外内容的建议

我有一个#banner可以容纳内容，基本上我想要做的是显示一定量的内容，然后有一个更多的按钮，显示如果点击了其他内容。这反过来也会动画#banner的高度，我已将#banner高度设置为300px，但想要查找内容#inner的高度并相应地为其设置动画效果。目前我有以下版本，但认为我使用了很多#ids /来达到这个效果，谁能告诉我如何让这个更好？关于如何最好地揭示基于内容高度的额外内容的建议

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

感谢凯尔

来源

2012-04-25 styler

为什么要添加所有这些DIV和ID？只需一个DIV就可以做同样的事情。 – powerbuoy 2012-04-25 22:28:06

嗨，目前所有的divs，因为我不完全确定创建这种效果的最佳方式 – styler 2012-04-25 22:48:55

但是，如果你只是删除它们，它不会工作吗？我根本看不到他们的用途。 – powerbuoy 2012-04-25 22:49:55

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

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

下面将计算innerDiv的基础上的div内容的高度。

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

DEMO

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-25 22:30:52

关于如何最好地揭示基于内容高度的额外内容的建议

回答

相关问题