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

最新推荐文章于 2024-11-08 13:46:46 发布

weixin_30348519

最新推荐文章于 2024-11-08 13:46:46 发布

阅读量109

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/smallsong/archive/2012/02/20/2358897.html

版权

<!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>