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);
					});