JQuery效果

VIP文章秋城落叶

于 2020-03-31 10:44:53 发布

阅读量97

点赞数

本文链接：https://blog.csdn.net/qq_40861561/article/details/105217215

版权

jQuery hide()和show()
使用hide()和show()方法来隐藏和显示HTML元素:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
  $("div").hide();
  });
  $("#show").click(function(){
  $("div").show();
  });
});
</script>
</head>
<body>
<div>点击隐藏/显示</div>
<button  type="button" id="hide">隐藏</button>
<button  type="button" id="show">显示</button>
</body>
</html>

语法:

$(selector).hide(speed,callback);
$(selector).show(speed,callback);

可选的speed 参数规定隐藏/显示的速度,可以取以下值："slow"、"fast" 或毫秒

可选的 callback 参数是隐藏或显示完成后所执行的函数名称

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
  $("div").hide(1000);
  });
  $("button").click(function(){
  $("div").show(1000);
  });
});
</script>
</head>
<body>
<div>点击隐藏/显示</div>
<div>jquery 极客教程</div>
<button>显示/隐藏</button>
</body>
</html>

带有speed 参数的 hide() 方法,并使用回调函数:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
     $("div").hide(1000,"linear",function(){
      alert("hide()已完成!");
  });
  });
});
</script>
<style>
    div{
    width: 80px;
    height: 80px;
    background-color: #f2f2f2;  
    }
</style>
</head>
<body>
<div>点击隐藏</div>
<div>jquery 极客教程</div>
<button>隐藏</button>
</body>
</html>

可以使用 toggle() 方法来切换 hide() 和 show() 方法

显示被隐藏的元素,并隐藏已显示的元素:

$(selector).toggle(speed,callback);

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
  $("div").toggle();
  });
});
</script>
</head>
<body>
<div>点击隐藏/显示</div>
<div>jquery 极客教程</div>
<button>显示/隐藏</button>
</body>
</html>

可选的 speed 参数规定隐藏/显示的速度,可以取以下值："slow"、"fast" 或毫秒

可选的 callback 参数是 toggle() 方法完成后所执行的函数名称

jQuery Fading 方法

jQuery 拥有四种 fade 方法:

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

jQuery fadeIn() 方法

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<sc

最低0.47元/天解锁文章

秋城落叶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery效果

jQuery hide()和show()使用hide()和show()方法来隐藏和显示HTML元素:<!DOCTYPEhtml><html><head><metacharset="utf-8"><scriptsrc="jquery.min.js"></s...
复制链接

扫一扫

JQuery效果

“相关推荐”对你有帮助么？