jquery动画到自动高度不起作用答案

【问题标题】：jquery animate to autoheight not workingjquery动画到自动高度不起作用
【发布时间】：2012-09-27 02:43:03
【问题描述】：

我正在编写这个脚本来制作内容旋转器。首先，我让所有幻灯片获取它们的默认高度，然后将它们设置为 0 高度。在触发点击时（使用带幻灯片 ID 的 href），所有打开的幻灯片将转到高度 0，触发的幻灯片将动画到自动高度。

一切都按计划进行，不包括自动高度。所有幻灯片都保持在 0 高度，无论其中的内容量如何。唯一的可见性是 850 的最小高度。

任何帮助将不胜感激。

$(function() { 

    $(".slide").each(function() {
        slideHeight = $(this).height();
    });

    $(".slide").css({ "height": "0", "opacity": "0"});


    $(".side-nav ul li a").click(function(event) {
        event.preventDefault();
        currentHref = $(this).attr('href');
        $(".slide").stop().animate({"opacity": "0", "height": "0px", "min-height": "0px"}, 100);
        $(currentHref).stop().animate({"opacity":"1", "min-height": "850px", height: slideHeight + "px"}, 450);

    });                     

});

【问题讨论】：

啊，是的，谢谢。刚刚做了。
幻灯片高度在设置为 0 之前的值是多少？如果它小于850px min-height 将始终覆盖它（在支持 min/max 的浏览器上）。 Also, here's a quick jsFiddle outlining scope of OP's needs
能否在 jsfiddle 中创建一个示例，我们可以看看？
@Jason Towne 请在我的评论中看到小提琴；应该非常接近 OP 的目标。
js fiddle 已添加：jsfiddle.net/zQLQV 似乎它拿走了最后一张幻灯片并将该值应用于所有幻灯片。

标签： jquery height

【解决方案1】：

我相信你的问题就在这里：

$(".slide").each(function() {
    slideHeight = $(this).height();
});

发生的情况是您的 slideHeight 变量仅设置为最后一张幻灯片的高度。如果您将最短的幻灯片移到列表中的最后一个位置，您会看到其他幻灯片的内容被截断。

我已经 updated your fiddle 将每张幻灯片的高度存储在幻灯片本身的数据属性中。

HTML：

<div class="side-nav">
  <ul>
    <li><a href="#one-slide">1</a></li>
    <li><a href="#two-slide">2</a></li>
    <li><a href="#three-slide">3</a></li>
  </ul>
</div>

<div class="slide" id="one-slide">asdf<br>asdf<br>asdf<br>asdf<br></div>
<div class="slide" id="two-slide">asdf<br>asdf<br>asdf<br></div>
<div class="slide" id="three-slide">asdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdf<br></div>

Javascript：

$(function() { 

$(".slide").each(function() {
    $(this).data('slideHeight', $(this).height());
});

$(".slide").css({ "height": "0", "opacity": "0"});


$(".side-nav ul li a").click(function(event) {
    event.preventDefault();
    var targetContainer = $($(this).attr('href'));
    currentHref = $(this).attr('href');
    $(".slide").stop().animate({"opacity": "0", "height": "0px"}, 100);
    targetContainer.stop().animate({"opacity":"1", height: targetContainer.data('slideHeight') + "px"}, 450);
});                        

});

【讨论】：

谢谢。我已经用这个把头发扯了好几个小时了！