JQ也有很多元素隐藏和显示的效果

代码如下：

<p>哈哈哈哈！</p>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>

<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
  //slideUp()向上滑动。
  $("p").slideUp();
  });
  $(".btn2").click(function(){
  //slideDown();向下滑动，
  $("p").slideDown();
  //$("p").slideToggle();
  });
});
</script>

slideUp()向上滑动,slideDown();向下滑动，slideToggle()滑动效果，在显示和隐藏状态切换

//fadeTo()淡出效果
 $("p").fadeTo(1000,0.4);
  });
  $("p").fadeOut(1000,0.4);
  });

fadeTo(),fadeOut()淡出效果

<p>演示带有不同参数的 fadeIn() 方法。</p>
<button>点击这里，使三个矩形淡入</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>

$("button").click(function(){
    //fadeIn()淡入
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });

fadeIn()淡入，带有不同参数的fadeIn()

<p>实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。</p>
<button>点击淡入/淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

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

fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。
如果元素是淡出显示的，fadeToggle() 会使用淡入效果显示它们。
如果元素是淡入显示的，fadeToggle() 会使用淡出效果显示它们。

标签：function,淡入,JQ,几种,fadeToggle,fadeIn,淡出,隐藏,click
来源： https://blog.csdn.net/m0_51530332/article/details/110388861