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

Jquery FadeIn,FadeOut,toggle,slideToggle的使用方法实例

2012-02-20 09:28 686 查看

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Jquery 效果 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<style type="text/css">
div.panle
{
margin:10px;
background:#e5eecc;
padding:5px;
height:120px;
border:solid 1px #c3c3c3;

}
</style>
<script>
$(function(){

$("#a").bind("click",function(){
// $("p").fadeOut();
//增加fadeOut消失速度,callback是动画效果执行完毕后进行的回调函数应用
$("p").fadeOut(1000,callback);
//$("p").fadeOut(1000);
});

$("#b").bind("click",function(){

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

//同理显示出也一样
$("p").fadeIn(1000,function(){
alert("动画执行完毕后!");
});
});

function callback()
{
alert("开始测试1")
}

//2 切换P隐藏
$("#c").bind("click",function(){
$("p").toggle();
});

//3 滑动DIV

$("#d").bind("click",function(){

$(".panle").slideToggle(1000);

});

});
</script>

<body>
<div border="1px">1.FadeIn与FadeOut用法 $(selector).fadeIn(speed,callback) $(selector).fadeOut(speed,callback)
<br/>
<br/>
<p>哈哈啊啊</p>
<button id="a">FadeOut</button>
<button id="b">FadeIn</button>
</div>
<div border="1px">2.Toggle切换-------------$(selector).toggle(speed,callback)
<br/>
<br/>

<p>切换内容信息</p>
<p>把所有含P元素的标签进行切换隐藏</p>
<button id="c">切换Toggle</button>
</div>

<div border="1px" class="panle">3.上下滑动-----------------$(selector).slideToggle()
<br/>
<br/>

<p>Jquery效果滑动内容信息,</p>
</div>
<button id="d">滑动</button>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航