從顯示器向下滑動動畫：無顯示：塊？

Question

有沒有一種方法來顯示動畫：無顯示：使用CSS塊，以便隱藏的div向下滑動而不是突然出現，或者我應該以這種不同的方式？

HTML：

<div id="box"> 
    Initial Content 
    <div class="hidden"> 
     This is hidden content 
    </div> 
</div> 

CSS：

#box { 
    height:auto; 
    background:#000; 
    color:#fff; 
    cursor:pointer; 
} 
.hidden { 
    height:200px; 
    display:none; 
} 
    .hidden.open { 
     display:block; 
    } 

這裏是我的腳本：

$(document).ready(function() { 
    $('#box').click(function() { 
     $(this).find(".hidden").toggleClass('open'); 
    }); 
}); 

而一個JSFiddle

Answer 1

是的，有一種方法： http://jsfiddle.net/6C42Q/12/

通過使用CSS3過渡，並操縱高度，而不是顯示屬性：

.hidden { 
    height: 0px; 
    -webkit-transition: height 0.5s linear; 
     -moz-transition: height 0.5s linear; 
     -ms-transition: height 0.5s linear; 
     -o-transition: height 0.5s linear; 
      transition: height 0.5s linear; 
} 

.hidden.open { 
    height: 200px; 
    -webkit-transition: height 0.5s linear; 
     -moz-transition: height 0.5s linear; 
     -ms-transition: height 0.5s linear; 
      -o-transition: height 0.5s linear; 
      transition: height 0.5s linear; 
} 

這裏更多：Slide down div on click Pure CSS?

Answer 2

什麼

$("#yourdiv").animate({height: 'toggle'});

切換會切換您的div開啓/關閉，動畫應該使它從下面顯示。在這種情況下，你不需要特定的CSS來「隱藏」它。

Answer 3

既然你已經使用jQuery，最簡單的事情就是使用slideDown（）。 http://api.jquery.com/slidedown/

還有slideToggle（）。

然後，您不需要手動執行所有瀏覽器特定的轉換css。

Answer 4

您還可以使用

$('#youDiv').slideDown('fast'); 

，或者你可以告訴大家，主動DIV上升，則被叫一個下降

$('.yourclick').click(function(e) { 
     var gett = $(this).(ID); 
     $('.youractiveDiv').slideUp('fast', function(){ 
     $('.'+gett).slideDown(300); 
     }); 
}); 

類似的東西。

Answer 5

我喜歡CSS轉換的想法，但它仍然非常激動。有時候，最大高度必須設置爲非常高的數字，因爲動態內容會導致過渡無用，因爲它非常容易跳動。所以，我回到jQuery，但它有它自己的錯誤。內聯元素是跳躍式的。

我發現這個工作對我來說：

$(this).find('.p').stop().css('display','block').hide().slideDown(); 

停止停止所有之前的過渡。 css確保它被視爲塊元素，即使它不是。 hide隱藏該元素，但jquery會將其作爲塊元素記住。 ，最後slideDown通過滑動顯示元素。