fadeIn()与fadeOut()方法

　　show()和hide()方法与fadeIn()和fadeOut()方法相比较，相同之处是都是切换元素的显示状态，不同之处在于，前者的动画效果使用元素的width与height属性都发生了变化，而后者仅是改变元素的透明度，并不修改其他属性。fadeIn()和fadeOut()方法调用格式如下。

　　fadeIn()方法的格式：fadeIn(speed,[callback])

　　该方法的功能是改变所选元素的透明度，实现淡入的动画效果，并在完成时，可执行一个回调的函数。参数speed为动画效果的速度，可选参数callback为动画完成时执行的函数。

　　fadeOut()方法的格式：fadeOut(speed,[callback])

　　该方法的功能是改变所选元素的透明度，实现淡出的动画效果，其包含参数的功能与fadeIn()方法一样。

<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>.divFrame{border: solid 1px #666;width: 188px;text-align: center;}.divFrame .divTitle{background-color: #eee;padding: 5px 0;}.divFrame .divContent{padding: 5px 0;}.divFrame .divContent .box{width: 100px;height: 100px;border: solid 1px #eee;padding: 2px;background-color: orange;}.divFrame .divTip{position: absolute;padding: 120px 0 0 60px;font-size: 13px;font-weight: bold;}.btn{border: solid 1px #666;padding: 2px;width: 80px;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
<script>$(function(){$box = $(".box");    //获取色块对象
        $tip = $(".divTip");    //获取提示元素对象
        $("input:eq(0)").click(function(){$tip.html("");    //清空提示内容//在2000毫秒中淡入色块，并执行一个回调函数
            $box.fadeIn(2000,function(){$tip.html("淡入成功！");});});$("input:eq(1)").click(function(){$tip.html("");$box.fadeOut(2000,function(){$tip.html("淡出成功！");});});})
</script>
</head>
<body><div class="divFrame"><div class="divTitle"><input type="button" value="fadeIn" id="Button1" class="btn" /><input type="button" value="fadeOut" id="Button2" class="btn" /></div><div class="divContent"><div class="divTip"></div><div class="box"></div></div></div>
</body>
</html>

结果如下图所示：

转载于:https://www.cnblogs.com/baixc/p/3405672.html

fadeIn()与fadeOut()方法相关推荐

IE下jquery的fadeIn与fadeOut方法失效的BUG
2019独角兽企业重金招聘Python工程师标准>>> BUG1:绝对定位嵌套绝对定位这个问题遇到过好多次,因为没有做笔记,所以每次遇到这个问题都要研究半天.好记性不如烂笔头,这话 ...
Jquery实现轮播图效果（fadeIn()和fadeOut()方法的应用）
2019独角兽企业重金招聘Python工程师标准>>> 1.jquery.js从官网上下载最新的,使用外链导入到html中, 下载地址: http://jquery.com/down ...
fadeOut和fadeIn的使用方法
fadeOut() 方法使用淡出效果来隐藏被选元素. $(".btn2").click(function(){ $("p").fadeOut(); }); fa ...
fadein和fadeto_jQuery fadeIn，fadeOut，fadeTo
fadein和fadeto jQuery provides an easy way to implement transparency effect in HTML through fadeIn(), ...
原生js实现fadein 和 fadeout淡入淡出效果
用法: $("button").click(function(){ $("p").fadeOut(); }); fadeOut() 方法逐渐改变被选元素的不透明 ...
jQuery fadeIn() 、fadeOut()
一.jQuery fadeIn() 方法使得一个隐藏的元素淡入视野.首先,元素占据的空间出现在页面上(这可能意味着页面上的其他元素要移走):然后,元素逐渐地变得可见.如果元素在页面上已经可见, ...
jQuery之动画系列(show、hide、fadeIn、fadeOut、fadeToggle、fadeTo、slideDown、slideUp、slideToggle)
文章目录 show 和 hide fadeIn 和 fadeOut fadeToggle fadeTo slideDown 和 slideUp slideToggle show 和 hide < ...
收集两种fadeIn和fadeOut的js原生写法
第一种写法 <script type="text/javascript">window.onload=function(){//定义基本操作类 var operrate ...
dojo学习日记(6)——dojo/_base/fx的 fadeOut()方法
dojo/_base/fx method当中的 fadeOut()方法返回一个节点从当前透明度淡化到完全透明的动画. node (DOMNode| String):必须重写的,写一个需要f ...

fadeIn()与fadeOut()方法

fadeIn()与fadeOut()方法相关推荐

最新文章

热门文章