jQuery的動畫到autoheight不工作

更新小提琴：http://jsfiddle.net/zQLQV/jQuery的動畫到autoheight不工作

我寫這個劇本，使內容旋轉。首先，我將所有幻燈片都設置爲默認高度，然後將它們設置爲0高度。在觸發器點擊（對幻燈片ID使用href）時，所有打開的幻燈片將轉到高度0，觸發的幻燈片將動畫到自動高度。

一切按計劃運行，不包括autoheight。無論內容的數量如何，所有幻燈片都保持在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); 

    });      

});

來源

2012-09-26 user1521516

是啊，謝謝。剛纔那樣。 – user1521516

設置爲0之前幻燈片高度的值是多少？如果小於'850px'，則最小高度將始終覆蓋它（在支持最小/最大值的瀏覽器上）。 [另外，這裏有一個快速的jsFiddle概述OP的需求範圍]（http://jsfiddle.net/hYzSy/） – Ohgodwhy

可以在jsfiddle中創建一個示例，我們可以看一看嗎？ –

我相信你的問題是在這裏：

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

});

來源

2012-09-26 18:43:03

謝謝。我一直在用這個一個小時把我的頭髮剪出來！ – user1521516

jQuery的動畫到autoheight不工作

回答

相關問題