当前位置: 代码迷 >> Web前端 >> jQuery兑现div滑动效果
  详细解决方案

jQuery兑现div滑动效果

热度:122   发布时间:2012-11-26 11:48:49.0
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);
					});

?

?

?

  相关解决方案