您的位置：首页 > Web前端 > JQuery

jquery中实现显示、隐藏、淡入淡出

2012-03-30 19:27 344 查看

<!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>无标题文档</title>

<script language="javascript" type="text/javascript" src="../../jquery/jquery.js"></script>

<script language="javascript" type="text/javascript">

//使用jquery加载事件

$(document).ready(function (){

//使用toggle方法实现显示和隐藏

$("#btn1").toggle(function (){

$("p").hide("slow");

},function(){

$("p").show("slow");

});

//淡入淡出效果

$("#btn2").toggle(function (){

$("p").fadeIn("slow");

},function(){

$("p").fadeOut("slow");

});

//淡入淡出效果，透明度0.66

$("#btn3").toggle(function (){

$("p").fadeTo("slow",0.66);

},function(){

$("p").fadeTo("slow",0.22);

});

});

</script>

</head>

<body>

<p style="background-color:#3F9">

这是一行文字<br />

这是一行文字<br />

这是一行文字<br />

这是一行文字<br />

这是一行文字</p>

<input type="button" id="btn1" value="显示/隐藏" />

<input type="button" id="btn2" value="淡入淡出效果" />

<input type="button" id="btn3" value="淡入淡出效果，透明度0.66" />

</body>

</html>

如图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航