jquery结合animate和stop()实现菜单滑动效果三体教程
文章目录

jquery结合animate和stop()实现菜单滑动效果

我们经常在一些网站上看到,页面的左边或是右边,有一排小图标。

鼠标移上去会渐渐的伸展开来,鼠标移开又慢慢的缩回去恢复原样。

这应该说是鼠标滑动窗口特效。

最主要的就是用到了jquery的animate方法。

代码实例:

html代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<SCRIPT src="js/jquery-1.8.3.min.js" type=text/javascript></SCRIPT>
<style type="text/css">
.box{width:120px;height:60px; line-height:60px; text-align:center;position:fixed;right:0;color:#fff; border-top-left-radius:30px; border-bottom-left-radius:30px;}
.box1{top:60px;background:#00adce;}
.box2{top:122px;background:#eb06cd;}
.box3{top:184px;background:#e84b0d;}
.box4{top:246px;background:#f4b01e;}
</style>
</head>
<body>
<div class="box box1">php教程</div>
<div class="box box2">javascript教程</div>
<div class="box box3">python教程</div>
<div class="box box4">jquery教程</div>
<script type="text/javascript">
$('.box').each(function(){
	$(this).hover(function(){
		$(this).stop().animate({width:'150'},500);
	},function(){
		$(this).stop().animate({width:'100'},500);
	});
});
</script>
</body>
</html>
亲自测试一下

jquery菜单滑动效果

需要注意的是,如果不加stop(),在几个菜单上快速的滑入又滑出,就会产生“动画累积”的效果,当鼠标最后停止移动,积累的动画还会一直持续执行,直到动画序列执行完毕为止。

本文网址:http://www.santii.com/article/110.html


数据更新时间:2018-05-25