div鼠標懸停,子元素上移,鼠標移出,子元素下移動畫。
阿新 • • 發佈:2017-11-10
auto pan mouseout 懸停 edt out script function hid
HTML:
<div class="edt_title" >
<div id="edt_title">
<p class="edt_title_top">e定投</p>
<div class="product_line"></div>
<p class="edt_title_c">
多種期限<br /><br />穩健收益
</p>
<p class="edt_title_top" style="margin-top: 60px;">e定投</p>
<div class="product_line"></div>
<p class="edt_title_c">
多種期限<br /><br />穩健收益
</p>
<div class="product_more">
查看全部
</div>
</div>
</div>
css:
.edt_title{ height: 200px; width: 150px; margin: 200px auto; text-align: center; overflow:hidden;/* 溢出部分不顯示 */ } #edt_title{ position: relative;/* 子元素設置relative */ }
js
$("#edt_title").mouseover(function(){ $(this).stop().animate({bottom:‘200px‘},800); }); $("#edt_title").mouseout(function(){ $(this).stop().animate({bottom:‘0px‘},800); });
stop()事件用來阻止動畫一直運行。
div鼠標懸停,子元素上移,鼠標移出,子元素下移動畫。