只是最基本的东西,没啥稀奇的,只是今天看jquery教程的时候偶然看到show()和hide()是可以写两个参数的,
第一个参数是元素隐藏/显示的速度(单位:毫秒),另一个是一个function类型。
例子如下,消失时会同时向上向左移动并且字体颜色逐渐淡化,元素还会还一直抖动,显示时相反,这种渐变效果挺可爱的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> </head> <body> <div> <h4>我喜欢吃的水果</h4> <ul> <li>苹果</li> <li>甘桔</li> <li>梨</li> </ul> <input id="hidval" type="hidden" value="0"/> </div> <script type="text/javascript"> $(function () { $("h4").bind("click", function () { //第一种写法 if ($("#hidval").val() == 0) { $("ul").hide(3000,function() { $("#hidval").val(1); }); } else { $("ul").show(3000,function(){ $("#hidval").val(0); }); } //第二种写法 //$("ul").toggle(3000); }) }); </script> </body> </html>