内容在 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> 

任何帮助都会很棒！另外，我可能希望在一页上有此幻灯片的多个实例。现在单击“阅读更多”链接将显示所有“详细信息”div。我将如何使这项工作仅在单个 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”处理程序。