jQuery实现基本淡入淡出效果的方法详解
更新时间：2018年09月05日 11:21:19 作者：furway
这篇文章主要介绍了jQuery实现基本淡入淡出效果的方法,结合实例形式详细分析了jQuery使用fadeIn()、fadeOut()及fadeToggle()等方法控制页面元素淡入淡出显示效果的相关操作技巧,需要的朋友可以参考下
本文实例讲述了jQuery实现基本淡入淡出效果的方法。分享给大家供大家参考，具体如下：
jQuery fadeIn()方法：用于淡入已隐藏的元素
jQuery fadeOut()方法：用于淡出可见的元素
<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
});
});
</script>
</head>
<body>
<p>演示带有不同参数的fadeIn()方法。</p>
<button>点击</button>
<br />
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
</body>
</html>
运行结果：
jQuery fadeToggle()方法：方法可以在fadeIn()与fadeOut()方法之间进行切换
语法：$(selector).fadeToggle(speed,callback);
如果元素已淡出，则fadeToggle()会向元素添加淡入效果
如果元素已淡入，则fadeToggle()会向元素添加淡出效果
<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
});
});
</script>
</head>
<body>
<button>点击</button>
<br/>
<div id="div1" style="width:80px;height:80px;background-color:red;"</div>
</body>
</html>
运行结果：
jQuery fadeTo()方法：允许渐变为给定的不透明(值介于0与1之间)
语法：$(selector).fadeTo(speed,opacity,callback);
<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo(1000,0.2);
});
});
</script>
</head>
<body>
<button>点击</button>
<br/>
<div id="div1" style="width:80px;height:80px;background-color:red;"</div>
</body>
</html>
运行结果：
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于jQuery相关内容还可查看本站专题：《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
jquery ready函数、css函数及text()使用示例
想必大家对jquery的ready函数、css函数、text()并不陌生吧，其实很好理解的，接下来有个不错的示例，如果你对此理解还是很模糊可以参考下2013-09-09
下面小编就为大家带来一篇基于Jquery Ajax type的4种类型(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
jquery validate poshytip 自定义样式
项目中做了一个jquery.validate气泡提示在新版的jquery.validate中，有这个功能，但在我这里不怎么好用，所以自己加了一个，找了一些插件qtip2的样式不错，需要的朋友可以参考下2012-11-11
在使用jquery操作js时，经常整不明白this与$(this)。抽空仔细测试了一把，记录下来以供在忘记的时候拉出来参考参考！2010-09-09
当您在电商购物网站浏览中意的商品时，您可以点击页面中的“加入购物车”按钮即可将商品加入的购物车中。本文介绍借助一款基于jQuery的动画插件，点击加入购物车按钮时，实现商品将飞入到右侧的购物车中的效果。2015-03-03
下面小编就为大家带来一篇动态生成的DOM不会触发onclick事件的原因及解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
使用jQuery包，实现表格列宽可拖拽功能，并实现页面reset时的重新布局，用法及示例如下，感兴趣的朋友不要错过2014-09-09
本文是对jquery中日期控件datepicker的属性进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
用jquery实现的textarea 高度自适应代码。这个动画效果比较流畅。适合新手学习。非常简单实用，这里推荐给小伙伴们。2015-03-03
本篇文章是对jquery获取父窗口元素的实现方法进行了详细的分析介绍，需要的朋友参考下2013-06-06
最新评论