jQuery动画方法

一、.hover方法

　　　描述：将二个事件函数绑定到匹配元素上，分别当鼠标指针进入和离开元素时被执行。

　　 .hover()方法是同时绑定 mouseenter和 mouseleave事件。我们可以用它来简单地应用在鼠标在元素上行为。

　　　调用$(selector).hover(handlerIn, handlerOut)是以下写法的简写：　　

　　$(selector).mouseenter(handlerIn).mouseleave(handlerOut);

　　下面示例为模拟鼠标悬停

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			width:200px;
			height: 200px;
			border: 1px solid red;
		}
		.over{
			background-color: yellow;
			border: 5px dashed green;
			color: blue;
		}
		.out{
			background-color: red;
			border: 5px solid yellow;
			color: pink;
		}
	</style>
	<script src='jquery-3.1.1.js'></script>
</head>
<body>
	<div>这是个有故事的div</div>
</body>
</html>
<script>
	$('div').hover(function(){
		this.className = 'over';
	},function(){
		this.className = 'out';
	})
</script>

二、动画方法

　　jQuery中的动画效果都可以指定3种速度参数”slow”、”normal”、”fast”，甚至以毫秒为单位进行添加动画效果。

　　1.show()显示元素与hide()隐藏元素。

　　示例：点击标签，显示和隐藏div

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>显示与隐藏</title>
	<link rel="stylesheet" href="donghua.css">
	<script src='jquery-3.1.1.js'></script>
</head>
<body>
	<h3>点我咯</h3>
	<div>这是个有故事的div</div>
</body>
</html>
<script>
	var flag = true
	$('h3').bind('click',function(){
		if(flag){
			$(this).next().hide();
		}else{
			$('div').show();
		}
		flag = !flag;
	})
</script>

　　2.fadeIn()与fadeOut()淡入淡出方法(颜色变淡最后消失)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src='jquery-3.1.1.js'></script>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		div{
			width: 100px;
			height: 100px;
			background-color: green;
		}

	</style>
</head>
<body>
	<h3 style="width: 100px;background-color: red">点我看看咯</h3>
	<div>这是个有故事的div</div>
</body>
</html>
<script>
	var flag = true;
	$('h3').click(function(){
		if(flag){
			$(this).next().fadeOut(5000);
		}else{
			$('div').fadeIn(5000);
		};
		flag = !flag;
	})
</script>

　　3.slideUp()和slideDown()滑动方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>滑动动画显示</title>
	<link rel="stylesheet" href="donghua.css">
	<script src="jquery-3.1.1.js"></script>
</head>
<body>
	<h3>点我咯</h3>
	<div>梅刚是傻逼</div>
</body>
</html>
<script>
	var flag = true;
	$('h3').click(function(){
		if(flag){
			$(this).next().slideUp(3000);
		}else{
			$('div').slideDown(3000);
		}
		flag = !flag
	})
</script>

　　Css样式

*{
			margin: 0;
			padding:0;
		}
div{
			background-color: red;
			width: 200px;
			height: 200px;
			position: relative;
		}
h3{
			background-color: green;
			width: 200px;
		}

　　4.animate(params,[speed],[callback])自定义动画方法　　

　　参数说明：
　　params:一个包含样式属性及值的映射
　　speed:速度参数，可选
　　callback:动画完成时执行的函数，可选
　　注意：使用animate()方法之前，必须将元素的position样式改为”relative”或”absolute”

　　animate()方法可以实现
　　自定义简单动画
　　累加、累减动画(通过”+=”或”-=”设置位置)
　　(按顺序执行)多重动画
　　利用动画回调函数实现动画完成时的设置

　　判断元素是否处于动画状态
　　if(!$(element).is(“:animated”)){
　　// 如果当前没有进行动画，执行的代码
　　}

　　示例1：点击div,div向右下方移动，并变大，停止后，返回原位置

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>自定义动画效果</title>
	<script src='jquery-3.1.1.js'></script>
	<link rel="stylesheet" href="donghua.css">
</head>
<body>
	<div></div>
</body>
</html>
<script>
	$('div').click(function(){
		$(this).animate({
			width:'500px',
			height:'500px',
			left:'300px',
			top:'300px',
		},5000,function(){
			$(this).animate({
				width:'100px',
				height:'100',
				left:0,
				top:0
			})
		})
	})
</script>

　　示例2：点击开始按钮，div向右移动，开始按钮变为暂停，点击移动中的div停止一定，按钮变为开始。（自定义动画累加累减效果实现）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="donghua.css">
	<script src='jquery-3.1.1.js'></script>
	<title>Document</title>
</head>
<body>
	<div></div>
	<input type="button" value="开始" id="btn">
</body>
</html>
<script>
	$(function(){
			$('#btn').click(function(){
				var $div = $('div');
				if($div.is(":animated")){
					$div.stop();
					this.value = '开始';
				}else{
					$('div').animate({left:'+=200px'},3000);
					this.value = '暂停';
				}
				
			})
		})
</script>

　　　5、toggle()方法

　　　　切换元素的可见状态。如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。

　　　 show()与hide()方法的简写形式

　　　示例：点击标签，div显示或隐藏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="donghua.css">
	<script src='jquery-3.1.1.js'></script>
</head>
<body>
	<h3>点我</h3>
	<div>这是个有故事的div</div>
</body>
</html>
<script>
	$('h3').click(function(){
		$(this).next().toggle(3000);  //切换元素的可变状态
	})
</script>

　　 6、slideToggle()方法

　　slideUp和slideDown简写

　　slideToggle() 方法通过使用滑动效果（高度变化）来切换元素的可见状态。

　　如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。　　　　

　 $(selector).toggle(speed,callback,switch)
　　speed 可选，规定元素从可见到隐藏的速度，默认0
          在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。如果设置此参数，则无法使用 switch 参数。

　　callback  可选。toggle 函数执行完之后，要执行的函数。

　　switch   可选，布尔值。规定 toggle 是否隐藏或显示所有被选元素。

　　示例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="donghua.css">
	<script src='jquery-3.1.1.js'></script>
</head>
<body>
	<h3>点我</h3>
	<div>这是一个有故事的div</div>
</body>
</html>
<script>
	$('h3').click(function(){
		$('div').slideToggle(3000); //切换元素可见状态
	})
</script>

　　　7. fadeTo()方法

　　fadeTo() 方法将被选元素的不透明度逐渐地改变为指定的值。

　　语法：

　　$(selector).fadeTo(speed,opacity,callback)

　　speed 可选。规定元素从当前透明度到指定透明度的速度。
　　opacity 必需。规定要淡入或淡出的透明度。必须是介于 0.00 与 1.00 之间的数字。
　　callback 可选。fadeTo 函数执行完之后，要执行的函数。

　　示例：　

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="donghua.css">
	<script src='jquery-3.1.1.js'></script>
</head>
<body>
	<h3>点我</h3>
	<div>这是一个有故事的div</div>
</body>
</html>
<script>
	$('h3').bind('click',function(){
		$(this).next().fadeTo(3000,0.3,function(){
			$(this).css('border','3px dashed green');
		})
	})	
</script>

　　8、fadeToggle()方法

　　fadeToggle() 方法在fadeIn() 和fadeOut()方法之间切换。

　　如果元素是淡出显示的，fadeToggle() 会使用淡入效果显示它们。

　　如果元素是淡入显示的，fadeToggle() 会使用淡出效果显示它们。

　　注释：隐藏的元素不会被完全显示（不再影响页面的布局）。

　　语法：

$(selector).fadeToggle(speed,easing,callback)

speed 可选。规定褪色效果的速度

easing 可选。规定在动画的不同点上元素的速度。默认值为 "swing"。(可选"linear" - 匀速移动，"swing" - 在开头/结尾移动慢，在中间移动快)

callvack 可选，fadeToggle() 方法执行完之后，要执行的函数。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="donghua.css">
	<script src='jquery-3.1.1.js'></script>
</head>
<body>
	<h3>点我</h3>
	<div>这是一个有故事的div</div>
</body>
</html>
<script>
	$('h3').click(function(){
		$(this).next().fadeToggle();
	})
</script>

　　二级菜单联动效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>二级菜单效果</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		ul{
			list-style-type: none;
		}
		div{
			width: 20%;
			background-color: green;
			position: relative;
		}
		.submenu{
			display: none;
		}
		ul h3{
			border: 1px solid red;
		}
	</style>

	<script src='jquery-3.1.1.js'></script>


</head>
<body>
	<div>
	<ul>
		<li>
			<h3>美食</h3>
			<ul class="submenu">
				<li>地锅鸡</li>
				<li>皮肚面</li>
				<li>馒头</li>
			</ul>
		</li>

		<li>
			<h3>读书</h3>
			<ul class="submenu">
				<li>当代青年</li>
				<li>皮囊</li>
				<li>海子的诗</li>
			</ul>
		</li>

		<li>
			<h3>娱乐</h3>
			<ul class="submenu">
				<li>明星出轨</li>
				<li>最新电影</li>
				<li>杨幂离婚</li>
			</ul>
		</li>
	</ul>
	</div>
	<input type="button" value="隐藏" id="btn">
</body>
</html>
<script>
	$('h3').hover(function(){
		$(this).css('background-color','red')
		$(this).next().show(2000);
	},function(){
		$(this).css('background-color','yellow')
		$(this).next().hide(2000);
	});
	var flag = true;
	var div_width = $('div').css('width');//获取div的宽度
	$('#btn').click(function(){
		if(flag){			  
			//$('div').css('left','-'+div_width);
			$('div').animate({left:'-'+div_width},3000);
			this.value = '显示';
		}else{
			$('div').animate({left:0},3000);
			this.value = '隐藏'
		}
		flag = !flag;
		
	});
</script>

posted @ 2018-12-25 21:09 李大鹅阅读(288) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

李大鹅

多想和你一样臭不要脸，墨镜和表情都挂在脸上。