Jquery | Ciro's blog

非常简单的jQuery div显示隐藏效果

January 8th, 2010 ciro 1 comment

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready( function(){}); function hiden(){ $("#divObj").hide();//hide()函数,实现隐藏,括号里还可以带一个时间参数(毫秒)例如hide(500)以500毫秒的速度隐藏,还可以带slow,fast } function slideToggle(){ $("#divObj").slideToggle(500);//窗帘效果的切换,点一下收,点一下开,参数可以无,参数说明同上 } function show(){ $("#divObj").show();//显示,参数说明同上 } function toggle(){ $("#divObj").toggle(500);//显示隐藏切换,参数可以无,参数说明同上 } function slide(){ $("#divObj").slideDown();//窗帘效果展开 } </script> </head> <body> <h3>div里内容的显示隐藏特效</h3> <input type="button" value="隐藏" onclick="hiden()"/> <input type="button" value="显示" onclick="show()"/> <input type="button" value="窗帘效果显示2" onclick="slide()"/> <input type="button" value="窗帘效果的切换" onclick="slideToggle()"/> <input type="button" value="隐藏显示效果切换" onclick="toggle()"/> <div id="divObj" style="display:none"> 1.测试例子<br/> 2.测试例子<br/> 3.测试例子<br/> 4.测试例子<br/> 5.测试例子<br/> 6.测试例子<br/> 7.测试例子<br/> 8.测试例子<br/> 9.测试例子<br/> 0.测试例子<br/> </div> </body> </html>

Tips:You can change the code before run.

Categories: 技术 Tags: jquery

一些不错渐隐弹出效果

July 19th, 2009 ciro No comments

节选自原文：http://devsnippets.com/article/10-transition-effects-the-art-of-showinghiding-content.html

1.Jquery实现的淡入淡出效果

这种淡入淡出的效果可以应用在图片，文字片段，甚至任何节点，未激活时该效果显示30%的透明度，鼠标hover效果为100%的透明度，很适合在网页的局部内容表现上使用。


$(document).ready(function(){    
$("ELEMENT HERE").fadeTo("slow", 0.3);    
$("ELEMENT HERE").hover(function(){    
$(this).fadeTo("slow", 1.0);    
},function(){    
$(this).fadeTo("slow", 0.3);    
});    
});

查看示例下载

Ciro's blog

Archive

非常简单的jQuery div显示隐藏效果

一些不错渐隐弹出效果

Recent Posts

Recent Comments

Tag cloud

Pages

Meta

Categories

Blogroll