您现在的位置： 365建站网 > 365文章 > CSS3/js/jquery实现淡入（fadeIn）淡出（fadeOut）效果的方法

CSS3/js/jquery实现淡入（fadeIn）淡出（fadeOut）效果的方法

文章来源：365jz.com 点击数：896 更新时间：2017-12-26 09:36 参与评论

基于CSS3实现淡入（fadeIn）淡出（fadeOut）效果:

淡入淡出效果大多是依照jquery中fadeIn和fadeOut的方法使用js来控制元素的透明度达到目的，但缺点是有轻微的卡顿感，并且运行效率一般。这里提供另外一个思路，即通过预先定义好的css样式控制图片透明度的过渡，这种方法过渡平滑，过渡的效果基于css3的animation，所以效率高些。思路是将淡入，淡出的效果做成预先定义好的样式类，然后用JS改变元素的类来达到图片轮播。（注意：因为是基于CSS3的animation，在移动端做的兼容性测试表现不错，桌面端暂时没有发现太大的问题。但IE对于css的background支持不太好，外链图片有时会有问题。）
基于CSS3淡入淡出效果的图片自动轮播DEMO点击预览
关键点在于fadeIn和fadeOut之间的透明度切换：

/* 轮播图片默认的样式*/
       .bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      -webkit-transition: opacity 2s linear;
      -moz-transition: opacity 2s linear;
      -o-transition: opacity 2s linear;
      transition: opacity 2s linear;
      opacity:0;
      filter:alpha(opacity=0);
    }
        .fadein{
            opacity:100;
            filter:alpha(opacity=100);
        }

PS：轮播图片默认透明度为0，设置一个opacity=100名为fadein的类使用JS控制其与默认透明度的切换，本篇博客的轮播方法是自动的一张张切换，并无交互性，使用触控左右滑动图片的轮播请猛戳俺的另一篇博客：原生JS实现滑动图片轮播

而JS方面则是通过获取imgs数组，轮播其中存放图片的div，方法是控制图片div的class。
废话不多说，上代码：

HTML（后插入的图片显示在前）：

<div id="imgs">
<div id="bg1" class="bg"></div>
<div id="bg2" class="bg"></div>
</div>

CSS：

.bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transition: opacity 2s linear;
-moz-transition: opacity 2s linear;
-o-transition: opacity 2s linear;
transition: opacity 2s linear;
opacity:0;

}

#bg1 {
background: url(http://i1.tietuku.com/7b57a678c8999dbas.jpg) no-repeat;
background-size: cover;

}

#bg2 {
background: url(http://i1.tietuku.com/1182f22573e6051fs.jpg) no-repeat;
background-size: cover;
}

.fadein {
opacity: 100;
filter: alpha(opacity=100);
}

JS：

// 替换class达到淡入淡出的效果
function fadeIn(e) {
e.className = "bg fadein"
};

function fadeOut(e) {
e.className = "bg"
};
//申明图片数组中当前的轮播图片
cur_img = document.getElementById("imgs").children.length - 1;
//图片轮播函数
function turnImgs(imgs) {
    var imgs = document.getElementById("imgs").children;
    if (cur_img == 0) {
      fadeOut(imgs[cur_img]);
      cur_img = imgs.length - 1;
      fadeIn(imgs[cur_img]);
    } else {
      fadeOut(imgs[cur_img]);
      fadeIn(imgs[cur_img - 1]);
      cur_img--;
    }
}
//设置轮播间隔
setInterval(turnImgs, 3000);

demo中只用了两张图片，如果需要插入更多的图片，可以在id=“imgs”的div中加入一个新的子div ，class加上bg即可，然后在CSS中加入该div的描述，比如HTML中加入<div id="bg3" class="bg"></div>，然后CSS中则加入

#bg3 {
background: url(图片地址) no-repeat;
background-size: cover;
}
即可。

原生js实现fadein 和 fadeout淡入淡出效果：

js里面设置DOM节点透明度的函数属性：filter= "alpha(opacity=" + value+ ")"（兼容ie）和opacity=value/100（兼容FF和GG）。

先来看看设置透明度的兼容性代码：

</>code
 
function setOpacity(ele, opacity) { 
if (ele.style.opacity != undefined) { 
///兼容FF和GG和新版本IE 
ele.style.opacity = opacity / 100; 
} else { 
///兼容老版本ie 
ele.style.filter = "alpha(opacity=" + opacity + ")"; 
} 
}

关于有的小伙伴这样写：

</>code
 
function setOpacity(ele, opacity) { 
if (document.all) { 
///兼容ie 
ele.style.filter = "alpha(opacity=" + opacity + ")"; 
} 
ele { 
///兼容FF和GG 
ele.style.opacity = opacity / 100; 
} 
}

我想说这样在IE10下运行有问题，点了之后没反应。因为IE10支持opacity属性不支持filter了，这个方法不可取。

fadein 函数代码：

</>code
 
function fadein(ele, opacity, speed) { 
if (ele) { 
var v = ele.style.filter.replace("alpha(opacity=", "").replace(")", "") || ele.style.opacity; 
v < 1 && (v = v * 100); 
var count = speed / 1000; 
var avg = count < 2 ? (opacity / count) : (opacity / count - 1); 
var timer = null; 
timer = setInterval(function() { 
if (v < opacity) { 
v += avg; 
setOpacity(ele, v); 
} else { 
clearInterval(timer); 
} 
}, 500); 
} 
}

fadeout 函数代码：

</>code
 
function fadeout(ele, opacity, speed) { 
if (ele) { 
var v = ele.style.filter.replace("alpha(opacity=", "").replace(")", "") || ele.style.opacity || 100; 
v < 1 && (v = v * 100); 
var count = speed / 1000; 
var avg = (100 - opacity) / count; 
var timer = null; 
timer = setInterval(function() { 
if (v - avg > opacity) { 
v -= avg; 
setOpacity(ele, v); 
} else { 
clearInterval(timer); 
} 
}, 500); 
} 
}

下面给一个demo示例：

</>code
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<script type="text/javascript" src="fade.js"></script> 
<script type="text/javascript"> 
window.onload = function () { 
document.getElementById('Button1').onclick = function () { 
fadeout(document.getElementById('DV'), 0, 6000); 
} 
document.getElementById('Button2').onclick = function () { 
fadein(document.getElementById('DV'), 80, 6000); 
} 
} 
</script> 
</head> 
<body> 
<div id="DV" style="background-color: green; width: 400px; height: 400px;"></div> 
<input id="Button1" type="button" value="button" /> 
<input id="Button2" type="button" value="button" /> 
</body> 
</html>

Jquery中淡入淡出效果fadeIn()、fadeOut()、fadeToggle()、fadeTo()的使用方法：

一、基本语法

1、fadeIn淡入、fadeOut淡出、fadeToggle淡入淡出切换（已经淡出点击淡入，或者相反）：

$(selector).fadeIn(duration,complete);

$(selector).fadeOut(duration,complete);

$(selector).fadeToggle(duration,complete);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"（200ms）、"fast"（600ms）或毫秒。【默认为400ms】
可选的 callback 参数是 fading 完成后所执行的函数名称。

2、fadeTo：jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

$(selector).fadeTo(speed,opacity,callback);

必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。

二、使用方法

1、内联调用（匿名函数）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#div1").fadeIn();
                $("#div2").fadeIn("slow");
                $("#div3").fadeIn(3000, function(){
                    document.getElementById("pp").innerHTML = "效果出现了！";
                });
            });
        });
    </script>
</head>

<body>
    <p>演示带有不同参数的 fadeIn() 方法。</p>
    <p id="pp">Testing</p>
    <button>点击这里，使三个矩形淡入</button>
    <br><br>
    <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
    <br>
    <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
    <br>
    <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>

即直接在callback处写函数。
2、外部调用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
    <script type="text/javascript">
        function myFunc(){
            document.getElementById("pp").innerHTML = "效果也出现了！";
        };
        $(document).ready(function(){
        $("button").click(function(){
            $("#div1").fadeIn("slow");
            $("#div2").fadeIn("fast");
                    $("#div3").fadeIn(3000, myFunc);
        });
        });
    </script>
</head>

<body>
    <p>演示带有不同参数的 fadeIn() 方法。</p>
    <p id="pp">Testing</p>
    <button>点击这里，使三个矩形淡入</button>
    <br><br>
    <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
    <br>
    <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
    <br>
    <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>

三、新API

点击参考新API参数有三个，而callback（complete）参数是最后一个，那么为什么可以正确执行呢？
这是JS特性之一，以前没见过这样的函数调用（因为都有默认值），而且发现我根本没有把myFunc函数传递给Jquery函数！这必须深究一下，So JS函数到底是怎么回事？

四、JS函数重载

有过C系列语言学习经历的都知道，函数传递参数都会进行一致性检查，你传递多少个参数，参数的类型都会检查。但是由上面的例子可以看出，javascript却没有这样的一致性检查！多传、少传好像他都能接受。验证过后确定确实是这样的，传递很多个参数都可以。
还有一个问题是好像间隔传递都行？！这就很奇葩了，那么原因是什么呢？想了很久也没想明白！查看源码，发现很多jQuery.extend方法，那么确定了：原因是函数重载。但是我们注意到JS和C++的不同，C++会有参数检查，多了不行，所以可以直接定义多个参数类型或者个数不同的同名函数实现重载，JS却不管你有多少，只管前面的有效参数。那么怎么实现JS的函数重载？有很多方法！
1、利用arguments实现；
2、利用typeof进行参数类型判断；
但是这两种方法有很大的局限性，要是处理的参数很多，重载逻辑岂不是很复杂！？那么有没有好的方法呢？
最终发现暂时还没有极好的方法，但是看到几篇还不错的文章

如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！点击进入论坛

您可能感兴趣的文章:

发表评论 (896人查看，0条评论): 请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。

昵称：

最新评论

------分隔线----------------------------

上一篇：javascript 中阶乘函数使用方法
下一篇：正数、负数的原码,反码,补码使用详解

大家感兴趣的内容

CSS3/js/jquery实现淡入（fadeIn）淡出（fadeOut）效果的方法

</>code

</>code

</>code

</>code

</>code

您可能感兴趣的文章:

公司信息

快速入口

其它栏目

业务咨询