jquery---summary【2】

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

Asteroid 325

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

阅读量98

点赞数

分类专栏：前端

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

版权

前端专栏收录该内容

48 篇文章 0 订阅

订阅专栏

jQuery 效果 - 淡入淡出

jQuery 拥有下面四种 fade 方法：

fadeIn()
fadeOut()
fadeToggle()
fadeTo()
一、注意大小写，fadeIn() fadeOut() fadeToggle() fadeTo() 大小写不能变。
二、fadeTo() 没有默认参数，必须加上 slow/fast/Time

1.fadeIn()方法
jQuery fadeIn() 用于淡入已隐藏的元素。

语法:

$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。.
可选的 callback 参数是 fading 完成后所执行的函数名称。

eg.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	
		</style>
		<script src="../js/jquery-3.4.1.min.js"></script>
		<script>
		$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});
</script>
</head>

<body>
<p>以下实例演示了 fadeIn() 使用了不同参数的效果。</p>
<button>点击淡入 div 元素。</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

</body>
</html>

2.jQuery fadeOut() 方法
jQuery fadeOut() 方法用于淡出可见元素
语法:

$(selector).fadeOut(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
eg.

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

3.jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

语法:

$(selector).fadeToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	
		</style>
		<script src="../js/jquery-3.4.1.min.js"></script>
		<script>
		$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
  });
});
</script>
</head>

<body>
<p>fadeToggle</p>
<button>淡入/淡出div 元素。</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

</body>
</html>

4.jQuery fadeTo() 方法

jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

语法:

$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

可选的 callback 参数是该函数完成后所执行的函数名称。
eg

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

jQuery 滑动方法

通过 jQuery，您可以在元素上创建滑动效果。

jQuery 拥有以下滑动方法：

slideDown()
slideUp()
slideToggle()

1.slideDown() 方法
slideDown() 方法用于向下滑动元素。
语法:

$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

2.jQuery slideUp() 方法
jQuery slideUp() 方法用于向上滑动元素。

语法:

$(selector).slideUp(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

3.jQuery slideToggle() 方法
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。
$(selector).slideToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div1,#div2,#div3,#div4,#div5,#div6{
				padding:5px;
				text-align: center;
				background: #E5EECC;
				border:solid 1px #C3C3C3
			}
			#div2{
				padding:50px;
				display: none;
			}
			
			#div4,#div6{
				padding:50px;
				
			}
		</style>
		<script src="../js/jquery-3.4.1.min.js"> </script>
		<script>
		 $(document).ready(function(){
			$("#div1").click(function(){
				$("#div2").slideDown("slow");//滑下
			});
		 });
		 $(document).ready(function(){
			 $("#div3").click(function(){
				 $("#div4").slideUp("slow");//滑上
				 
			 })
		 })
		 
		 $(document).ready(function(){
		 			 $("#div5").click(function(){
		 				 $("#div6").slideToggle("slow");//滑上/滑下
		 				 
		 			 })
		 })
		</script>
	</head>
	<body>
		<div id="div1">点我滑下面板</div>
		<div id="div2">gbc is an excellent people</div>
		
		<div id="div3">点我滑上面板</div>
		<div id="div4">gbc is an excellent people</div>
		
		
		<div id="div5">点我滑上/滑下面板</div>
		<div id="div6">gbc is an excellent people</div>
	</body>
</html>

Asteroid 325

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery---summary【2】

jQuery 效果 - 淡入淡出jQuery 拥有下面四种 fade 方法：fadeIn()fadeOut()fadeToggle()fadeTo()一、注意大小写，fadeIn() fadeOut() fadeToggle() fadeTo() 大小写不能变。二、fadeTo() 没有默认参数，必须加上 slow/fast/Time1.fadeIn()方法jQ...
复制链接

扫一扫

专栏目录