jquery下fadeOut效果实现和功能解释

最新推荐文章于 2020-07-13 12:34:02 发布

Nicholas-C-root

最新推荐文章于 2020-07-13 12:34:02 发布

阅读量2k

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/CROOTJAVA/article/details/78957368

版权

jquery 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html" charset="utf-8" />
<title></title>
<style>
p{
color: red;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>


<body>
<h2>文字淡入淡出效果测试运用jquery库</h2>
<p>此部分作为淡入淡出操作的演示文稿</p>
<p>此部分作为淡入淡出操作的演示文稿</p>
淡出的隐藏效果:
<select id="animation">
<option value="1">fadeOut()</option>
<option value="2">fadeOUt("slow")</option>
<option value="3">fadeOut(3000)</option>
<option value="4">fadeOut(2000,complete)</option>
<option value="5">fadeOut(1000,"linear")</option>
<option value="6">fadeOut(options)</option>
</select>


</br></br>


<input id="btnFadeOut" type="button" value="点击淡出隐藏"/>
<input id="btnShow" type="button" value="显示" />

<script type="text/javascript">
//[显示]按钮
$('#btnShow').click(function(){
$("p").show();
});


//[隐藏]按钮
$('#btnFadeOut').click(function(){
/*val() 方法返回或设置被选元素的值。
元素的值是通过 value 属性设置的。该方法大多用于 input 元素。
如果该方法未设置参数，则返回被选元素的当前值。*/
var v = $("#animation").val();//选中的是父元素下的子元素
if(v == "1"){
$("p").fadeOut();//默认400ms
}else if(v == "2"){
$("p").fadeOut("slow");//slow=600ms
}else if(v == "3"){
$("p").fadeOut(3000);//运行时间3000ms
}else if(v == "4"){
$("p").fadeOut(2000,function(){
alert("隐藏完毕！");//运行2000ms后执行完毕再执行回调函数
});
}else if(v == "5"){
$("p").fadeOut(1000,"linear")//运行1000ms 动画方式是linear先慢后快
}else if(v == "6"){
$("p").fadeOut({
duration:1000//持续时间1000ms 平均变化
})
}
});
</script>
</body>
</html>