jquery 封装的动画效果函数

news/2024/7/19 14:09:42 标签: js, css, animation, css3, jquery

文章目录

  • 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>css">
			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>css">
			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>css">
			* {
				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>
		<divcss"> 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>css">
			* {
				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>css">
			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>

http://www.niftyadmin.cn/n/1403933.html

相关文章

jquery 全选,反选复选框

jquery 全选,反选复选框

<!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><title>我的购物车-品优购</title><link rel"stylesheet" href"css/base.css"><link rel"stylesheet" href&…
阅读更多...
jquery 修改购物车小计,添加加减功能

jquery 修改购物车小计,添加加减功能

<!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><title>我的购物车-品优购</title><link rel"stylesheet" href"css/base.css"><link rel"stylesheet" href&…
阅读更多...
DataGrip编写SQL语句操作Spark(Spark ThriftServer)

DataGrip编写SQL语句操作Spark(Spark ThriftServer)

文章目录 1.Spark ThriftServer2.启动 Spark ThriftServer3.Beeline方式连接4.DataGrip方式连接5. 代码方式6. SparkSQL运行方式7.参考文章 1.Spark ThriftServer Spark ThriftServer 相当于一个持续性的Spark on Hive集成模式&#xff0c;可以启动并监听在10000端口&#xff…
阅读更多...
jquery 创建,追加,删除节点

jquery 创建,追加,删除节点

<!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><ul><li>先来的li&l…
阅读更多...
VS2005 GetFont()-GetLogFont(tmpFont);weiwan

VS2005 GetFont()-GetLogFont(tmpFont);weiwan

GetFont()->GetLogFont(&tmpFont);
阅读更多...
jquery 事件处理

jquery 事件处理

事件处理on()绑定事件 on(方法在匹配元素上绑定一个或多个事件的事件处理函数 语法: element.on (events,[selector],fn)1.events:一个或多个用空格分隔的事件类型&#xff0c;如"click"或"keydown”. 2.selector:元素的子元素选择器。 3.fn:回调函数 案例: &…
阅读更多...
消息反射机制分析与理解

消息反射机制分析与理解

消息反射的基础知识1、消息反射解释&#xff1a;　　父窗口将控制子窗口发给它的通知消息&#xff0c;首先反射回子窗口进行处理&#xff08;即给控制子窗口一个机会&#xff0c;让控制子窗口处理此消息&#xff09;&#xff0c;这样通知消息就有机会能被子窗口自身进行处理。2…
阅读更多...
关于WM_NOTIFY与消息反射————耗费我两天时间才解决的问题

关于WM_NOTIFY与消息反射————耗费我两天时间才解决的问题

谁让我这么菜呢&#xff01;不过&#xff0c;没有菜鸟&#xff0c;哪来高手&#xff1f;-_-| 其实&#xff0c;问题很简单&#xff0c;我想在listctrl响应NM_SETFOCUS的同时通知其父窗口(其实我这句话说错了&#xff0c;listctrl只能响应NM_SETFOCUS&#xff0c;为什么有个“”…
阅读更多...
最新文章

Copyright @ 2022~2023