jQuery實現div滑動效果

前端效果：

 

鼠標滑上div的時候，隱藏當前顯示的div，顯示另一個div，離開的話還原，使用slideUp()和slideDown()即可解決。

 

需要注意的是，設置延遲的話，離開的時候當前div的時候未到達延遲時間，會導致離開之后div執行了事件，因此需要清除。

<ul id="marketAppDiv">
<s:iterator value="allList" status="st" var="app">
<li>
<div class="info">
<span><img src=""/></span><br/>
<span>${app.name}</span>
</div>
<div class="subinfo">
<span>提供商:${prov}</span><br/>
<span>發布日期：${devTime}</span>
</div>
</li>
</s:iterator>
<ul>

 

jQuery("#marketAppDiv").children('li').hover(
function() {
var me = this;
this._timeout = setTimeout(function() {
jQuery(me).children('div.subinfo').slideUp(300);
}, 500);
},
function() {
var me = this;
clearTimeout(this._timeout);
jQuery(me).children('div.subinfo').slideDown(100);
});

————————————————
版權聲明：本文為CSDN博主「iteye_5611」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/iteye_5611/article/details/82442963