jQuery

最新推荐文章于 2024-10-16 21:35:12 发布

%LCY%

最新推荐文章于 2024-10-16 21:35:12 发布

阅读量104

点赞数

文章标签： jquery 前端

本文链接：https://blog.csdn.net/weixin_41594028/article/details/106225912

版权

JQuery效果

jquery的hide()和show()

语法：

$(selector).hide(speed,callback);
$(selector).show(speed,callback);
hide（speed，callback），speed代表速度，callback代表隐藏之后执行的函数。
toggle() 方法可以实现hide（）和show（）函数的切换直接使用一个方法实两个方法的功能。toggle(speed，callback)方法的参数前者代表速度，后者代表执行显示或隐藏之后需要执行的函数。两个参数可以只有一个。

代码片段

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>显示与隐藏</title>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<script>
	   $(function() {
	   	$("#hide").click(function(){
	   		$("p").hide();
	   	});
	   	$("#show").click(function() {
	   		$("p").show();
	   	});
	   	 //toggle()显示被隐藏的元素，并隐藏已显示的元素：
	   	//$("button").click(function() {
	   		//$("p").toggle();
	   	})
	   });
	</script>
</head>
<body>
	<p>如果点击"隐藏",文本就会消失</p>
	<button id="hide">隐藏</button>
	<button id="show">显示</button>
	
	//<button>隐藏/显示</button>
</body>
</html>

jquery的淡入淡出

jQuery 拥有下面四种 fade 方法：

fadeIn().
fadeOut().
fadeToggle().
fadeTo().

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

 $(function() {
  	//淡入，设置display:none
    $("button").click(function() {
  	$("#div1").fadeIn();
  	$("#div2").fadeIn("slow");
  	$("#div3").fadeIn(2000);
  });
  
  //淡出
  $("button").click(function() {
    		$("#div1").fadeOut();
    		$("#div2").fadeOut("slow");
    		$("#div3").fadeOut(2000);
    	});
    	
    	//fadeToggle()方法实现fadeIn()和fadeOut()方法
    	$("#div5").click(function() {
    		$("#div4").fadeToggle(1000);
    	});
    	
   //jQuery fadeTo() 方法允许颜色渐变为给定的不透明度，淡入之后颜色透明度改变
    	$("button").click(function() {
    		$("#div1").fadeTo(1000,.7);
    		$("#div2").fadeTo(3000,.5);
    		$("#div3").fadeTo(5000,.3);
    	});
});

html部分

 <button>淡入</button>
	<div id="div1" style="width: 80px;height:  80px;background-color: green;display: none;"></div><br>
	<div id="div2" style="width: 80px;height:  80px;background-color: red;display: none;"></div><br>
	<div id="div3" style="width:  80px;height:  80px;background-color: blue;display: none;"></div>
	 <div id="div5">淡入/淡出</div>
	 <div id="div4">实现淡入淡出效果</div>

jQuery 滑动方法

jQuery 拥有以下滑动方法：

slideDown()方法用于向下滑动元素。
slideUp() 方法用于向上滑动元素。
slideToggle()方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

//slideUp()向上滑动
 $("#test").click(function(){
   $("#panel").slideUp("slow");
 });
//slideDown()向上滑动
$("test").click(function() {
 $("#panel").slideDown("slow");
});
//slideToggle()
$("test").click(function() {
 $("#panel").slideToggle("slow");
});

html部分

<div id="test">点我滑动面板</div>
<div id="panel">Hello world!</div>

%LCY%

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫