jquery hover animate()方法鼠标滑动显示插件


jquery hover animate()方法鼠标滑动显示插件
jquery hover animate()方法鼠标滑动显示插件以及鼠标滑动显示等js/jquery网页特效代码下载。

1. 引入CSS

<link type="text/css" rel="stylesheet" href="css/style.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery.1.10.2.js"></script>

3. HTML代码

<div class="pdList">
	<ul>
		<li>
			<div class="tmplS tmplS1">
				<div class="cover"></div>
				<div class="wrapS">
					<p class="ttl">高性能云主机</p>
					<p>安全 便捷 付费灵活</p>
					<p class="opt"><a href="https://www.51qianduan.com/">51前端</a>&nbsp;&nbsp;<a href="https://www.51qianduan.com/">51前端</a></p>	
				</div>
			</div>
		</li>	
		<li>
			<div class="tmplS tmplS2">
				<div class="cover"></div>
				<div class="wrapS">
					<p class="ttl">标准存储服务</p>
					<p>无限制 多备份 低成本</p>
					<p class="opt"><a href="https://www.51qianduan.com/">51前端</a></p>
				</div>
			</div>
		</li>
		<li>
			<div class="tmplS tmplS3">
				<div class="cover"></div>
				<a href="https://www.51qianduan.com/">51前端</a>
			</div>
		</li>	
		<li>
			<div class="tmplS tmplS4">
				<div class="cover"></div>
				<a href="https://www.51qianduan.com/">51前端</a>
			</div>
		</li>
	</ul>
</div>
<script type="text/javascript">
$(document).ready(function(){
	$('.tmplS').hover(function(){
		$(".cover", this).stop().animate({top:'156px', left:'0px'},{queue:false,duration:400})
	},function(){
		$(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:400})
	})
})
</script>

相关推荐

发表评论

相关文章