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