内容出现在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”事件处理程序。