如何添加 js/jquery 动画以在悬停时下拉 div？答案

【问题标题】：How do I add a js/jquery animation to pull down a div on hover?如何添加 js/jquery 动画以在悬停时下拉 div？
【发布时间】：2015-12-01 15:12:57
【问题描述】：

观察before hover 和after hover。我不想立即切换，而是想创建标题被拉下和展开的效果。所以基本上，我希望新的 div 从上到下出现。 html结构如下：

<a href="#" id='featured-article'>
	<img src="img/iraq-war.jpg" class='fluid'>
	<h1 class='center-text'>Featured Article: The War In Iraq</h1>
	<div class="mouse-over">
	     <p>The Iraq War was controversial at the time blah blah blah</p>
	</div>
</a>

有没有一种方便的方法来使用 jquery 做到这一点？也许是图书馆之类的？或者最坏的情况，我想看看原始的 js。或者其他建议。谢谢

【问题讨论】：

使用pure CSS animations 可以做到这一点。使用:hover 触发鼠标悬停动画。
@Evan，你看到我的回答了吗？如果它有效，请接受它作为礼貌。

标签： javascript jquery animation web jquery-animate

【解决方案1】：

您正在寻找slideDown():

$(function () {
  $(".center-text").mouseover(function () {
    $(this).next().stop().slideDown();
  }).mouseout(function () {
    $(this).next().stop().slideUp();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a href="#" id='featured-article'>
  <img src="http://panzura.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/google-logo.png" class='fluid' />
  <h1 class='center-text'>Featured Article: Article</h1>
  <div class="mouse-over">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi amet accusamus saepe, velit recusandae minus deserunt natus architecto quos ex. Error, labore, sed. Unde, velit, labore. Quam qui commodi accusamus.</p>
  </div>
</a>

【讨论】：

你为什么用.stop()？