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

标签 jquery height

更新 fiddle :http://jsfiddle.net/zQLQV/

我正在编写此脚本来制作内容旋转器。首先,我让所有幻灯片都获取默认高度,然后将它们设置为 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);

    });                     

});

最佳答案

我相信您的问题在这里:

$(".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);
});                        

});​

关于jquery 动画到自动高度不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12606791/

相关文章:

javascript - jQuery .click() - 需要确定鼠标被按下的位置,而不是释放的位置

javascript - 如何在桌面上使用javascript检测用户在底部

swift 3 : How to hide status bar without losing height

html - 文本区域高度和边距的格式化问题

javascript - 如何使用 jQuery 检索图像

javascript - javascript `this.closest` 在 IE11 和 Chrome 中的使用

jquery - 非恶意隐藏链接

jquery - 根据添加到数字的变量设置边距

javascript - VUE Carousel 3D Slider高度

javascript - 使用 JavaScript 使高度与动态宽度相同不起作用