本篇文章给大家带来的内容是关于jquery动画之hide()和show()的使用讲解一(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
hide()和show()方法,可以设置动画效果,本文对这两种方法效果加以说明。
hide(参数1,参数2):
参数1:时间,单位为毫秒,表示对象隐藏所用的时间
参数2:回调函数,该函数在对象隐藏后触发。
show(参数1,参数2):
参数1:同上
参数2:同上
示例:
需求说明:点击一个图片,该图片缓缓隐藏,隐藏后从页面删除,后一张图片补充前一张图片的位置
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> img{ width: 100px; height: 80px; } #pics div{ float: left; margin: 2px; width: 100px; height: 80px; } </style> <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script> <script> $(function(){ //获取所有的图片,并注册点击事件 $("#pics>div").click(function(){ $(this).hide(800,function(){ //回调函数,清除当前点击的元素 $(this).remove();//方法移除当前调用这个方法的元素---自杀 }); }); }); </script> </head> <body> <div id="pics"> <div>@@##@@</div> <div>@@##@@</div> <div>@@##@@</div> <div>@@##@@</div> <div>@@##@@</div> </div> </body> </html>
备注:
$(this).remove();//方法移除当前调用这个方法的元素---自杀
以上就是JQuery动画之hide()和show()的使用讲解一(代码示例)的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号