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