jquery 封装的动画效果函数

最新推荐文章于 2022-04-20 19:45:26 发布

黄大仙No.1

最新推荐文章于 2022-04-20 19:45:26 发布

阅读量405

点赞数

分类专栏： jQuery 文章标签： js css animation css3 jquery

本文链接：https://blog.csdn.net/qq_44378358/article/details/108241995

版权

jQuery 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

文章目录

show
hide
slideDown() 向下滑动
slideUp() 向上滑动
slideToggle()切换滑动
hover(over,out)
stop()
淡入淡出
fadeTo()

自定义动画animate()

jQuery给我们封装了很多动画效果，最为常见的如下:


显示隐藏	show(), hide(), toggle()
滑动	slideDown(),slideUp(), slideToggle()
淡入淡出	fadeIn(), fadeOut(), fadeToggle(), fadeTo()
自定义动画	animate()

show

show ( [speed,[easing] , [fn]])
(1）参数都可以省略，无动画直接显示。
( 2 ) speed :三种预定速度之一的字符串(“slow”, "normal”, or“fast”)或表示动画时长的亳秒数值(如:1000)。
( 3 ) easing : (Optional)用来指定切换效果，默认是“swing”，可用参数“linear”.
( 4 ) fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

hide

hide ( [speed,[easing] , [fn]]) 参数表示同show

案例:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<script src="js/jquery-3.5.1.min.js"></script>
		<style>
			div {
				width: 150px;
				height: 300px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<button>显示</button>
		<button>隐藏</button>
		<button>切换</button>
		<div></div>
	</body>
	<script>
        $(function () {
            /*一般不加参数,因为动画太丑*/
            $('button').eq(1).click(function () {
                $('div').hide('slow', 'swing', function () {
                    alert('任务完成')
                });
            })
            $('button').eq(0).click(function () {
                $('div').show('slow');
            })
            $('button').eq(2).click(function () {
                $('div').toggle();
            })
        })

	</script>
</html>

slideDown() 向下滑动

slideDown ( [speed,[easing] , [fn]]) 参数表示同show

slideUp() 向上滑动

slideToggle()切换滑动

在这里插入图片描述

案例:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<script src="js/jquery-3.5.1.min.js"></script>
		<style>
			div {
				display: none;
				width: 150px;
				height: 300px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<button>下滑</button>
		<button>上滑</button>
		<button>切换滑动</button>
		<div></div>
	</body>
	<script>
        $(function () {
            $('button').eq(0).click(function () {
                $('div').slideDown();
            })
            $('button').eq(1).click(function () {
                $('div').slideUp('slow');
            })
            $('button').eq(2).click(function () {
                $('div').slideToggle('slow','swing',function () {
	                alert(1)
                });
            })
        })

	</script>
</html>

hover(over,out)

over表示mouseover,out表示mouseout. 两处都是函数.是两者的组合写法,如果只写一个,不管鼠标经过还是离开都会触发.

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			li {
				list-style-type: none;
			}

			a {
				text-decoration: none;
				font-size: 14px;
			}

			.nav {
				margin: 100px;
			}

			.nav>li {
				position: relative;
				float: left;
				width: 80px;
				height: 41px;
				text-align: center;
			}

			.nav li a {
				display: block;
				width: 100%;
				height: 100%;
				line-height: 41px;
				color: #333;
			}

			.nav>li>a:hover {
				background-color: #eee;
			}

			.nav ul {
				display: none;
				position: absolute;
				top: 41px;
				left: 0;
				width: 100%;
				border-left: 1px solid #FECC5B;
				border-right: 1px solid #FECC5B;
			}

			.nav ul li {
				border-bottom: 1px solid #FECC5B;
			}

			.nav ul li a:hover {
				background-color: #FFF5DA;
			}
		</style>
		<script src="js/jquery-3.5.1.min.js"></script>
	</head>

	<body>
		<ul class="nav">
			<li>
				<a href="#">微博</a>
				<ul>
					<li>
						<a href="">私信</a>
					</li>
					<li>
						<a href="">评论</a>
					</li>
					<li>
						<a href="">@我</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">微博</a>
				<ul>
					<li>
						<a href="">私信</a>
					</li>
					<li>
						<a href="">评论</a>
					</li>
					<li>
						<a href="">@我</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">微博</a>
				<ul>
					<li>
						<a href="">私信</a>
					</li>
					<li>
						<a href="">评论</a>
					</li>
					<li>
						<a href="">@我</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">微博</a>
				<ul>
					<li>
						<a href="">私信</a>
					</li>
					<li>
						<a href="">评论</a>
					</li>
					<li>
						<a href="">@我</a>
					</li>
				</ul>
			</li>
		</ul>
		<script>
            $(function() {
                /*// 鼠标经过
                $(".nav>li").mouseover(function() {
                    // $(this) jQuery 当前元素  this不要加引号
                    // show() 显示元素  hide() 隐藏元素
                    $(this).children("ul").slideDown(500);
                });
                // 鼠标离开
                $(".nav>li").mouseout(function() {
                    $(this).children("ul").slideUp(500);
                })*/

                /*$('.nav>li').hover(function () {
	                $(this).children('ul').slideDown(200);
                },function () {
                    $(this).children('ul').slideUp(200);
                })*/

                $('.nav>li').hover(function () {
                    $(this).children('ul').slideToggle(200);
                })
            })
		</script>
	</body>

</html>

stop()

动画队列及其停止排队方法
1.动画或效果队列
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
2.停止排队

stop()

(1 ) stop0方法用于停止动画或效果。
(2）注意:stop()写到动画或者效果的前面，相当于停止结束上一次的动画。
案例:

$('.nav>li').hover(function () {
                    $(this).children('ul').stop().slideToggle(200);
                })

淡入淡出


fadeIn()	淡入
fadeOut	淡出
fadeToggle()	切换
fadeTo()	切换透明度

fadeTo()

1.渐进方式调整到指定的不透明度
fadeTo( [[speed] , opacity,[easing], [fn]])

2.效果参数
( 1 ) opacity透明度必须写，取值0~1之间。
(2 ) speed:三种预定速度之一的字符串(“slow”, "normal”,or"fast”)或表示动画时长的毫秒数值(如∶1000)。必须写
( 3 ) easing : (Optional)用来指定切换效果，默认是“swing”，可用参数“linear”。
( 4) fn

案例:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<script src="js/jquery-3.5.1.min.js"></script>
	</head>
	<body>
		<button>fadeIn</button>
		<button>fadeOut</button>
		<button>fadeToggle</button>
		<button>fadeTo</button>
		<div style="display:none;width: 200px;height: 150px;background-color: blue;"></div>
	</body>
	<script>
		$(function () {
            $('button').eq(0).click(function () {
                $('div').fadeIn(500);
            })
            $('button').eq(1).click(function () {
                $('div').fadeOut(500);
            })
            $('button').eq(2).click(function () {
                $('div').fadeToggle(500);
            })
            $('button').eq(3).click(function () {
                /*修改透明度,速度和透明度必须写*/
                $('div').fadeTo(1000, 0.5);
            })
        })
	</script>
</html>

案例:
在这里插入图片描述

<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.5.1.min.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			ul {
				list-style: none;
			}

			body {
				background: #000;
			}

			.wrap {
				margin: 100px auto 0;
				width: 630px;
				height: 394px;
				padding: 10px 0 0 10px;
				background: #000;
				overflow: hidden;
				border: 1px solid #fff;
			}

			.wrap li {
				width: 200px;
				float: left;
				margin: 0 10px 10px 0;
			}

			.wrap li img {
				display: block;
				width: 100%;
				border: 0;
			}
		</style>
		<script>
            $(function() {
                //鼠标进入的时候,其他的li标签透明度：0.5
                $(".wrap li").hover(function() {
                    $(this).siblings().stop().fadeTo(400, 0.5);
                }, function() {
                    // 鼠标离开，其他li 透明度改为 1
                    $(this).siblings().stop().fadeTo(400, 1);
                })

            });
		</script>
	</head>

	<body>
		<div class="wrap">
			<ul>
				<li>
					<a href="#"><img src="../pictures/2015.01.04-457.jpeg" alt="" /></a>
				</li>
				<li>
					<a href="#"><img src="../pictures/2015.01.04-520.jpeg" alt="" /></a>
				</li>
				<li>
					<a href="#"><img src="../pictures/2015.01.05-1262.png" alt="" /></a>
				</li>
				<li>
					<a href="#"><img src="../pictures/2015.01.06-659.png" alt="" /></a>
				</li>
				<li>
					<a href="#"><img src="../pictures/2015.01.07-478.jpg" alt="" /></a>
				</li>
				<li>
					<a href="#"><img src="../pictures/2015.01.07-615.png" alt="" /></a>
				</li>
			</ul>
		</div>
	</body>

</html>

自定义动画animate()

animate(params, [speed], [easing], [fn])
( 1 ) params:想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采
取驼峰命名法borderLeft。其余参数都可以省略。
(2 ) speed:三种预定速度之一的字符串(“slow”,"normal”,or“fast”)或表示动画时长的亳秒数值(如:1000)。
( 3 ) easing : (Optional)用来指定切换效果，默认是“swing”，可用参数“linear”.
( 4 ) fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

案例:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<script src="js/jquery-3.5.1.min.js"></script>
		<style>
			div {
				position: absolute;
				width: 200px;
				height: 200px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<button>动</button>
		<div></div>
		<script>
			$(function () {
			    $('button').click(function () {
                    $('div').animate({
                        left:500,
	                    top:300,
	                    opacity:0.5,
	                    width:520
                    },500,'swing',function(){});
                })
            })
		</script>
	</body>
</html>