JQuery动画——元素的显示与隐藏

最新推荐文章于 2024-05-06 00:37:37 发布

grandir

最新推荐文章于 2024-05-06 00:37:37 发布

阅读量601

点赞数 2

文章标签： JQuery动画基础

本文链接：https://blog.csdn.net/weixin_44738940/article/details/102673893

版权

JQuery动画——元素的显示与隐藏

语法：show([speed][,callback]) //显示
hide([speed][,callback]) //隐藏
在使用.show()和.hide()的时候，如果需要一个按钮切换操作，需要进行一些条件判断。而jQuery 提供一个类似功能的独立方法：.toggle() 实现对象的来回切换。toggle([speed][,callback]) //切换

可选的speed 参数规定隐藏/显示/切换的速度，可以取以下值：
“slow”、“fast” 或毫秒
可选的 callback 参数是隐藏/显示/切换完成后所执行的函数名称。

举一个简单的例子：

在这里插入图片描述
实现代码:

 <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>图片显示隐藏</title>
</head>
<body>
 <button class="show">显示</button>
 <button class="hide">隐藏</button>
 <button class="toggle">切换</button>
 <br/>
 <img class='img' src="**图片链接，这里要自己添加**"/>
 <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
 <script type="text/javascript">
  $(function(){
   $('.hide').click(function(){
    $('.img').hide(1000);
   });
   $('.show').click(function(){
    $('.img').show('fast');
   });
   $('.toggle').click(function(){
    $('.img').toggle(500);
   });
  })
 </script>
</body>
</html>

grandir

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery动画——元素的显示与隐藏

JQuery动画——元素的显示与隐藏一个前端菜鸟从基础开始学习JQuery,欢迎大家提出建议。语法：show([speed][,callback]) //显示hide([speed][,callback]) //隐藏
复制链接

扫一扫