jQuery实现div滑动效果

最新推荐文章于 2022-05-07 18:52:09 发布

原创最新推荐文章于 2022-05-07 18:52:09 发布 · 814 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

js 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的鼠标悬停效果，当鼠标滑过div时隐藏当前内容并显示另一div，离开时还原。文章详细展示了如何利用slideUp()和slideDown()方法，并通过设置延迟及清除定时器来优化用户体验。

前端效果：

鼠标滑上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);
					});