jQuery效果之显示与隐藏
2017-05-19 09:46 tlnshuju 阅读(185) 评论(0) 编辑 收藏 举报.hide([duration][,complete])——目标元素的隐藏。
.show([duration][,complete])——目标元素的显示;
.toggle([duration][,complete])——当目标元素隐藏时则显示。否则隐藏。
注:可选參数[duration]为方法运行的时间区间;[,complete]为回调函数。
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>显示与隐藏</title> <script src="js/jquery-2.1.3.min.js"></script> <script src="js/my.js"></script> <style> div{ background: #005599; width: 100px; height: 100px; margin: 5px; float: left; } </style> </head> <body> <img src="images/g.jpg"/> <button id="btn1">隐藏</button> <button id="btn2">显示</button> <button id="btn3">隐藏/显示</button> </body> </html>
/*显示与隐藏*/ $(document).ready(function(){ //隐藏 $('#btn1').click(function(){ //$('img').hide(); $('img').hide(1000); }); //显示 $('#btn2').click(function(){ //$('img').show(); $('img').show(1000); }); //切换显示与隐藏 $('#btn3').click(function(){ //$('img').toggle(); $('img').toggle(1000); }); //利用hide()制作一个效果 for(var i=0;i<5;i++){ $("<div>").appendTo(document.body); } $('div').click(function(){ $(this).hide(2000,function(){ $(this).remove(); }) }) })