jQuery---summary3

最新推荐文章于 2021-09-23 16:03:21 发布

Asteroid 325

最新推荐文章于 2021-09-23 16:03:21 发布

阅读量98

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43846020/article/details/103446140

版权

前端专栏收录该内容

48 篇文章 0 订阅

订阅专栏

jQuery 效果- 动画

jQuery animate() 方法允许您创建自定义的动画

1.jQuery 动画 - animate() 方法
jQuery animate() 方法用于创建自定义动画。

语法：

$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。
eg.把

元素往右边移动了 250 像素：
默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				height: 100px;
				width:100px;
				background-color: #008000;
				position: absolute;
			}
		</style>
		<script src="../js/jquery-3.4.1.min.js"></script>
		<script>
			$(document).ready(function(){
		$("button").click(function(){
			  $("div").animate({//操作多个属性
		  //$(selector).animate({params},speed,callback); 				       //$("div").animate({left:'250px'})操作一个属性
		  
					    left:'250px',
					    opacity:'0.5',
					    height:'150px',
					    width:'150px'
					  });
					});
			});
		</script>
	</head>
	<body>
		<button>开始动画</button>
      	<div></div>
	</body>
</html>

当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
同时，色彩动画并不包含在核心 jQuery 库中。
如果需要生成颜色动画，您需要从 jquery.com 下载颜色动画插件。

2.jQuery animate() - 使用相对值
也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      height:'+=150px',
      width:'+=150px'
    });
  });
});

3.jQuery animate() - 使用预定义的值
您甚至可以把属性的动画值设置为 “show”、“hide” 或 “toggle”：

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      height:'toggle';
      // height:'show'
      //height:'hide'
    });
  });
});

4.jQuery animate() - 使用队列功能
默认地，jQuery 提供针对动画的队列功能。

这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width:100px;
				height:100px;
				background:mediumaquamarine;
				position: absolute;
			}
		</style>
		<script src="../js/jquery-3.4.1.min.js"></script>
		<script>
			$(document).ready(function(){
				$("button").click(function(){
				 var div= $("div");
				   //$(selector).animate({params},speed,callback);
					 div.animate({height:'250px',opacity:'0.4'},"slow");
					  div.animate({width:'250px',opacity:'0.8'},"slow");
					   div.animate({height:'100px',opacity:'0.4'},"slow");
					    div.animate({width:'100px',opacity:'0.4'},"slow");
					
			    });
			});
		</script>
	</head>
	<body>
		<button>animate 队列</button>
		<div ></div>
	</body>
</html>

动画：先右移250px再字体变化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				background-color: #008000;
				height:100px;
				width:100px;
				position: absolute;
				
			}
		</style>
		<script src="../js/jquery-3.4.1.min.js"></script>
		<script>
			$(document).ready(function(){
				$("button").click(function(){
					$("div").animate({left:'250px'});
					$('div').animate({fontSize:'3em'});
				})
			})
		</script>
	</head>
	<body>
		<button>开始动画</button>
		<div>龚优秀</div>
	</body>
</html>

jQuery 停止动画

1.动画队列停止动画测试，只停止当前正在进行的动画，停止当前动画后，队列中的下一个动画开始进行：
2.可以在 stop() 中设置 stopAll 的参数为 true，这样就可以停止所有动画效果而不是只停止当前动画：

1.jQuery stop() 方法
jQuery stop() 方法用于停止动画或效果，在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

语法:
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#first,#second{
				padding:5px;
				text-align: center;
				background: #E5EECC;
				border:solid 1px #C3C3C3
			}
			#second{
				padding:50px;
				display: none;
			}
			
		</style>
		<script src="../js/jquery-3.4.1.min.js"></script>
		<script> 
		$("document").ready(function(){
			$("#first").click(function(){
				$("#second").slideDown(5000);
			});
		});
		$("document").ready(function(){
			$("button").click(function(){
					$("#second").stop();
			
			});
		});
		
		</script>
	</head>
	<body>
		<button>停止</button>
		<div id="first">点我向下滑动面板</div>
		<div id="second"></div>
	</body>
</html>

以上是停止一个动画

下面是停止所有动画

$(document).ready(function(){
  $("#first").click(function(){
    $("#second").slideDown(5000);
    $("#second").slideUp(5000);
  });
  $("#button").click(function(){
    $("#second").stop(true);//可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
  });
});

下面是停止当前动画

$("document").ready(function(){
			$("#first").click(function(){
				$("#second").slideDown(5000);
				$("#second").slideUp(5000);
			});
		});
		$("document").ready(function(){
			$("button").click(function(){
					$("#second").stop();
			
			});
		});

jQuery Callback 方法

Callback 函数在当前动画 100% 完成之后执行。
1.被立即停止的动画不会触发回调，被立即完成的动画会触发回调。
2.如果动画有队列的话，想实现其快速完成所有动画并停止，就要相应的与队列数对应条数的停止语句

jQuery 动画的问题
许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。

例子：$(“p”).hide(“slow”)
speed 或 duration 参数可以设置许多不同的值，比如 “slow”, “fast”, “normal” 或毫秒。

以下在隐藏效果完全实现后回调函数:

$("button").click(function(){
  $("p").hide("slow",function(){
    alert("段落现在被隐藏了");
  });
});


以下实例没有回调函数，警告框会在隐藏效果完成前弹出：

没有 callback(回调)
$("button").click(function(){
  $("p").hide(1000);
  alert("段落现在被隐藏了");
});

jQuery - 链(Chaining)

通过 jQuery，可以把动作/方法链接在一起。

Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。

jQuery 方法链接
直到现在，我们都是一次写一条 jQuery 语句（一条接着另一条）。

不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。

提示：这样的话，浏览器就不必多次查找相同的元素。

如需链接一个动作，您只需简单地把该动作追加到之前的动作上。
eg.
$(“p”).css(“color”,“red”).slideUp(5000).slideDown(5000);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
		<script>
			$(document).ready(function(){
				$("button").click(function(){
					$("p").css("color","red").slideUp(5000).slideDown(5000);
					
				})
			})
		</script>
	</head>
	<body>
		<p>优秀</p>
		<button>点我</button>
	</body>
</html>

Asteroid 325

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery---summary3

jQuery 效果- 动画jQuery animate() 方法允许您创建自定义的动画1.jQuery 动画 - animate() 方法jQuery animate() 方法用于创建自定义动画。语法：$(selector).animate({params},speed,callback);必需的 params 参数定义形成动画的 CSS 属性。可选的 speed 参数规定效果的时长...
复制链接

扫一扫

专栏目录