jQuery简单动画

最新推荐文章于 2021-01-15 21:39:21 发布

Vurtne1st

最新推荐文章于 2021-01-15 21:39:21 发布

阅读量289

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/Vurtne1st/article/details/52120008

版权

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery动画</title>
<script src="../websites/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>

<body>
<button id="btn">启动</button>
<p></p>
<div class="demo1"></div>
</body>
</html>
<script>
$().ready(function(e) {
	  $('#btn').click(function(){
		$('.demo1').toggle(2000);//toggle方法是不断改变元素宽度、高度和透明度来实现隐藏和显示
		})
          $('#btn').click(function(){
		$('.demo1').fadeToggle(2000);//fade方法是不断改变元素的透明度来实现隐藏和显示
		})
	  $('#btn').click(function(){
		   $('.demo1').slideToggle('slow');//slide方法是不断改变元素的高度来实现隐藏和显示
		   })
	//自定义动画:animate(params,speed,easing,callback)方法
	$('#btn').click(function(){
		$('.demo1').show();
		}).click(function(){
			$('.demo1').animate({'top':'+=10px','left':'+=500px','height':'200px'},3000);
			})
	//对于无法进行排队动画的方法，可以放到animate最后一个参数callback中，例如动画执行完毕变化css样式
	$('#btn').click(function(){
		$('.demo1').show();
		$('.demo1').animate({
			'left':'+=300px',
			'height':'+=100px',
			'opacity':'1'
			}).animate({
				'top':'+=300px',
				'width':'+=200px'
				},function(){
					$(this).css('border','5px solid blue');
					}).fadeOut('slow');
		})
	//停止动画和判断是否处于动画状态
	//停止动画：stop([clearQueue],[gotEnd])方法:两个参数都是布尔值，clearQueqe代表是否清空未执行玩的动画队列，gotEnd代表是否将正在执行的动画跳到末状态
	//判断是否处于动画状态：$('#id').is(':animated')
	//延迟动画：
	$('#btn').click(function(){
		$('.demo1').show();
		$('.demo1').animate({
			'left':'+=300px',
			'height':'+=100px',
			'opacity':'0.5'
			},3000).delay(5000);
			})
	//fadeTo方法：只改变元素的透明度
		$('#btn').click(function(){
		$('.demo1').show();
		$('.demo1').fadeTo(1200,'0.5',function(){
			 $(this).css('border','2px solid green');
			})
			})
	
});
</script>