首页> 基础笔记 >JS/JQ基础学习 >Jquery Jquery

jQuery动画特效

作者:小萝卜 2023-03-24 浏览 250

简介hide和show 同事修改多个样式属性,即高度,宽度,透明度。 fadeIn和fadeOut 只改变不透明度 slideUp和slideDown 只改变高度 fadeTo 只改变透明度 toggle 用来代替hide方法和show方法,所以会同时修改多个样式的属性即高度,宽度和不透明度。 slideToggle 用来代替slideUp和slideDown,只能改变高度。 animate 属于自定义动画的方法,以上各方法的实质都是调用该函数。

hide和show同事修改多个样式属性,即高度,宽度,透明度。

fadeIn和fadeOut只改变不透明度

slideUp和slideDown只改变高度

fadeTo只改变透明度

toggle用来代替hide方法和show方法,所以会同时修改多个样式的属性即高度,宽度和不透明度。

slideToggle用来代替slideUp和slideDown,只能改变高度。

animate属于自定义动画的方法,以上各方法的实质都是调用该函数。

实例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>特效</title>
	<style type="text/css">
		#all{width:400px;height:400px;background:orange;position:absolute;}
	</style>
</head>
<body>
	<button>快速显示</button>
	<button>快速隐藏</button>
	<button>滚动显示</button>
	<button>滚动隐藏</button>
	<button>渐隐渐显显示</button>
	<button>渐隐渐显隐藏</button>
	<button>显示隐藏切换</button>
	<button>自定义动画</button>
	<button>停止动画</button>

	<div id="all"></div>
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
	//第一个
	$('button').eq(0).click(function(){
		// $('#all').show();
		// $('#all').show('fast');//传递一个字符串 slow  normal  fast
		// $('#all').show(2000);//传递一个数字
	})

	//第二个
	$('button').eq(1).click(function(){
		// $('#all').hide();
		// $('#all').hide('fast');
		// $('#all').hide(2000);
	})

	//第三个
	$('button').eq(2).click(function(){
		// $('#all').slideDown();
		// $('#all').slideDown('slow');
		$('#all').slideDown(100);
	})

	//第四个
	$('button').eq(3).click(function(){
		// $('#all').slideUp();
		// $('#all').slideUp('slow');
		$('#all').slideUp(100);
	})

	//第五个
	$('button').eq(4).click(function(){
		// $('#all').fadeIn();
		// $('#all').fadeIn("slow");
		$('#all').fadeIn(1000);
	})

	//第六个
	$('button').eq(5).click(function(){
		// $('#all').fadeOut();
		// $('#all').fadeOut("slow");
		$('#all').fadeOut(1000);
	})

	//显示切换
	$('button').eq(6).click(function(){
		$('#all').toggle();
	})

	//自定义动画
	$('button').eq(7).click(function(){
		$('#all').delay(2000).animate({
			width:'100px',
			height:'100px',
			left:'200px',
			top:'100px'
		}, 2000);
	})

	//停止动画
	$('button').eq(8).click(function(){
		$('#all').stop();
	})

	</script>
</body>
</html>

很赞哦! (0)

文章评论

    高端网站建设