如何添加一個js/jquery動畫來將鼠標懸停在div上？

-1

觀察before hover和after hover。我不想立即切換，而是想創建頭部被拉下和展開的效果。所以基本上，我希望新的div從上到下出現。 HTML結構如下：如何添加一個js/jquery動畫來將鼠標懸停在div上？

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

有一種方便的方法使用jQuery做到這一點？也許是圖書館或什麼的？或者最糟糕的是，我想看到原始的js。或其他建議。由於

來源

2015-12-01 Evan Adler

這是可能的[純CSS動畫（https://css-tricks.com/almanac/properties/a做到這一點/動畫/）。使用'：hover'在mouseover上觸發動畫。 – Blazemonger

@Evan，你看到我的回答了嗎？如果有效，請接受它作爲禮貌。 –

您正在尋找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>

來源

2015-12-01 15:16:25

你爲什麼使用'.stop（）'？ – Rajesh

@Rajesh清除以前的動畫。 –

如何添加一個js/jquery動畫來將鼠標懸停在div上？

回答

相關問題