內容出現在jQuery下拉動畫完成之前

Question

我使用jQuery滑動並在點擊「閱讀更多」鏈接後在我的頁面上顯示內容。動畫效果很好，但是在鏈接被點擊之後，動畫滑動之前立即顯示正在顯示的內容。有趣的是，我已經在其他幾個網站上使用過這些代碼，並且從來沒有遇到過這個問題。

下面的代碼：

<script type="text/javascript"> 

function ShowHide(){ 
$(".details").animate({"height": "toggle"}, { duration: 500 }); 
} 

</script> 

和HTML

<div class="readmore"><a href="#" onclick="ShowHide(); return false;">More Info</a></div>    
    <div class="details"> 
     <div class="description"> 
     <div class="title">Description</div> 
      <p>content here</p> 

     <div class="title">Subscribe</div> 
     <a href="#">lorem</a><br /> 
     <a href="#">lorem</a> 
     </div> 
    </div> 

任何幫助將是巨大的！另外在附註中，我可能希望在一個頁面上有多個此滑動實例。現在點擊「閱讀更多」鏈接將顯示所有「細節」divs。我將如何在單個div上完成這項工作而無需爲每個實例編寫新代碼。一個例子，我想這將是一個WordPress的網站，顯示帖子列表中的帖子的細節。

Answer 1

確保包含內容的div（在您的情況下，具有類「details」的內容）也具有overflow: hidden CSS樣式集。

要回答你的第二個問題，你可以如下做到這一點：

$(document).ready(function() 
{ 
    //Bind the ShowHide function to onclick for each first link in the "readmore" div 
    $('div.readmore > a').click(ShowHide); 
}); 

function ShowHide(event) 
{ 
    //Find the next "details" div sibling below the link container and animate it 
    $(event.target).parent('div.readmore').next('div.details').animate(
     {"height": "toggle"}, { duration: 500 }); 
} 

還要確保刪除內聯使用此當分配給鏈接「onclick」事件處理程序。