jQuery的幻燈片沒有滑動

Question

我的jQuery的幻燈片沒有滑動，它真的只是出現。我可以看到動畫，如果我做.show，但我希望它從上到下出現。我曾嘗試用相同的結果如下（只顯示出來，沒有動畫）：

$(document).ready(function() { 

    $('#aboutLink').click(function() { 
     console.log("click"); 
     $('#content').slideDown(3000); 
    }); 

}); 

和

$(document).ready(function() { 

    $('#aboutLink').click(function() { 
     console.log("click"); 
     $('#content').slideDown('slow'); 
    }); 
}); 

CSS：

.content { 
    background-color:#E8E8E8; 
    min-height:700px; 
    margin-left:22px; 
    margin-right:auto; 
    border-radius: 0px 0px 10px 10px; 
    -moz-border-radius: 0px 0px 10px 10px; 
    -webkit-border-radius: 0px 0px 10px 10px; 
    display:none; 
} 

HTML

<div class="grid_11 content" id="content"> 

    </div> 

Answer 1

它試圖尋找height property.

The .slideDown() method animates the height of the matched elements. 

然而，這只是定義min-height

嘗試更換與height : 700px

Check Fiddle

像這樣的事情

$('#aboutLink').click(function() { 
    console.log("click"); 
    $('#content').animate({ 
     height: '400px' 
    }, 3000); 
}); 

但爲了達到此目的，您需要確保該元素未隱藏在頁面上。否則它將無法工作。

Animate Fiddle