jQuery实现动画效果

最新推荐文章于 2020-07-30 15:19:35 发布

Curry 3O

最新推荐文章于 2020-07-30 15:19:35 发布

阅读量145

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_42552393/article/details/97563931

版权

jQuery 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

1.隐藏

$obj.hide()
$obj.hide( [duration ],[complete ])
如果没有提供参数,被匹配的元素将不带动画地立即隐藏。这大致地等同于 .css(“display”, “none” )

2.显示

$obj.show()
$obj.show( [duration ],[complete ])
用法与hide类似

3.隐藏与显示

$obj.toggle( [duration ],[ complete ])
$obj.toggle( display )
display：
类型：Boolean
使用 true显示元素，使用false隐藏元素。

4.淡入

$obj.fadeIn( [duration ],[complete ])
通过把匹配的元素渐显为不透明，来显示匹配的元素。该方法变动了匹配的元素的不透明度。它近似于.fadeTo()方法，但是那个方法没有取消隐藏元素，并可以指定最终的不透明程度。

5.淡出

$obj.fadeOut([duration ],[complete ])
方法变动了匹配的元素的不透明度。一旦不透明度到达0，样式属性display会被设置为none，因此元素不再影响网页的布局。

6. 淡入到

$obj.fadeTo(duration, opacity,[complete])
调整匹配的元素的不透明度。opacity是一个0到1之间的数字，表示目标不透明度。

7. 淡入与淡出

$obj.fadeToggle( [duration],[complete])
通过变动匹配的元素的不透明度，来显示或隐藏匹配的元素。

8.滑下

$obj.slideDown([duration],[complete])
用滑移动作显示匹配的元素

9.滑上

$obj.slideUp([duration],[complete])
用一个滑移动作隐藏匹配的元素。

10.滑上与滑下

$obj.slideToggle([duration],[complete])
用一个滑移动作显示或者隐藏匹配的元素。

11.自定义效果

animate()
animate(properties,[duration ],[complete])
properties：一个CSS属性和值的对象，动画将根据这组对象移动。
1. 所有变动的属性必须变动到一个单一数字值 (width,height,left)
2. 除了样式属性，有些非样式属性，比如说scrollTop和scrollLeft，
以及自定义属性，也可以变动。
3. 如果一个值的前面加了+=或者-=这些字符，则目标值会根据属性的
当前值累加或连减给定的数字计算出来。

实例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>38</title>
	<style>
		div{
			width: 100px;
			height: 100px;
			background-color: pink;
		}
	</style>
	<script src="./js/jquery-3.4.1.min.js"></script>
	<script>
		$(function(){
			//显示与隐藏
			$('.hide').click(function(){
				$('div').hide(3000);
			});
			$('.show').click(function(){
				$('div').show(3000);
			});
			$('.toggle').click(function(){
				$('div').toggle(1000);
			});

			//淡入与淡出
			$('.hide').click(function(){
				$('div').fadeOut(3000);
			});
			$('.show').click(function(){
				$('div').fadeIn(3000);
				//淡入到某个透明度为止
				$('div').fadeTo(3000,0.5);
			});
			$('.toggle').click(function(){
				$('div').fadeToggle(1000);
			});

			//滑上与滑下
			$('.hide').click(function(){
				$('div').slideUp(3000);
			});
			$('.show').click(function(){
				$('div').slideDown(3000);
			});
			$('.toggle').click(function(){
				$('div').slideToggle(1000);
			});

			//自定义动画
			$('.own').click(function(){
				$('div').animate({
					width: '300px',
					height: '200px',
					marginTop: '100px',
				},3000);
			});
		});
	</script>
</head>
<body>
	<button class="hide">隐藏</button>
	<button class="show">展示</button>
	<button class="toggle">切换</button>
	<button class="own">自定义动画</button>
	<div>hello</div>
</body>
</html>