原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)

转载 2015年07月07日 16:12:45
<!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" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>原生JS实现淡入淡出效果</title>
<style>
/*demo css*/
#demo div.box {float:left;width:31%;margin:0 1%}
#demo div.box h2{margin-bottom:10px}
#demo div.box h2 input{padding:5px 8px;font-size:14px;font-weight:bolder}
#demo div.box div{text-indent:10px; line-height:22px;border:2px solid #555;padding:0.5em;overflow:hidden}
</style>
<script>
/**
 * @author Mr.Think
 * @author blog http://mrthink.net/
 * @2011.01.27
 * 可自由转载及使用,但请注明版权归属
 */
window.onload = function(){
//底层共用
    var iBase = {
        Id: function(name){
            return document.getElementById(name);
        },
//设置元素透明度,透明度值按IE规则计,即0~100
        SetOpacity: function(ev, v){
            ev.filters ? ev.style.filter = 'alpha(opacity=' + v + ')' : ev.style.opacity = v / 100;
        }
    }
//淡入效果(含淡入到指定透明度)
function fadeIn(elem, speed, opacity){
/*
* 参数说明
* elem==>需要淡入的元素
* speed==>淡入速度,正整数(可选)
* opacity==>淡入到指定的透明度,0~100(可选)
*/
   speed = speed || 20;
   opacity = opacity || 100;
//显示元素,并将元素值为0透明度(不可见)
   elem.style.display = 'block';
   iBase.SetOpacity(elem, 0);
//初始化透明度变化值为0
   var val = 0;
//循环将透明值以5递增,即淡入效果
   (function(){
       iBase.SetOpacity(elem, val);
       val += 5;
       if (val <= opacity) {
           setTimeout(arguments.callee, speed)
       }
   })();
}

//淡出效果(含淡出到指定透明度)
function fadeOut(elem, speed, opacity){
/*
* 参数说明
* elem==>需要淡入的元素
* speed==>淡入速度,正整数(可选)
* opacity==>淡入到指定的透明度,0~100(可选)
*/
   speed = speed || 20;
   opacity = opacity || 0;
   //初始化透明度变化值为0
   var val = 100;
//循环将透明值以5递减,即淡出效果
   (function(){
       iBase.SetOpacity(elem, val);
       val -= 5;
       if (val >= opacity) {
           setTimeout(arguments.callee, speed);
       }else if (val < 0) {
//元素透明度为0后隐藏元素
           elem.style.display = 'none';
       }
   })();
}
    
    
    var btns = iBase.Id('demo').getElementsByTagName('input');
    
    btns[0].onclick = function(){
        fadeIn(iBase.Id('fadeIn'));
    }
    btns[1].onclick = function(){
        fadeOut(iBase.Id('fadeOut'),40);
    }
    btns[2].onclick = function(){
        fadeOut(iBase.Id('fadeTo'), 20, 10);
    }
    
}
</script>
</head>
<body>


<!--DEMO start-->
<div id="demo">
<div class="box">
<h2><input type="button" value="点击淡入" /></h2>
<div id="fadeIn" style="display:none">
<p>Name:Mr.Think</p>
<p>Blog:http://mrthink.net</p>
<p>Date:2011.01.27</p>
</div>
<p>欲求文明之幸福,不得不经文明之痛苦.</p>
</div>

<div class="box">
<h2><input type="button" value="点击淡出" /></h2>
<div id="fadeOut">
<p>Name:Mr.Think</p>
<p>Blog:http://mrthink.net</p>
<p>Date:2011.01.27</p>
</div>
<p>欲求文明之幸福,不得不经文明之痛苦.</p>
</div>

<div class="box">
<h2><input type="button" value="点击淡出至指定透明度" /></h2>
<div id="fadeTo">
<p>Name:Mr.Think</p>
<p>Blog:http://mrthink.net</p>
<p>Date:2011.01.27</p>
</div>
<p>欲求文明之幸福,不得不经文明之痛苦.</p>
</div>
</div>
<!--DEMO end-->


</body>
</html>

用原生js模拟jquery的淡入淡出fade效果

代码测试: html代码: Document #div{ display: none; width: 100px; height: 100px; b...
  • Szu_AKer
  • Szu_AKer
  • 2016年08月11日 20:40
  • 2749

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

用法: $("button").click(function(){ $("p").fadeOut(); }); fadeOut() 方法逐渐改变被选元素的不透明度,从可见到隐藏(褪色效果)。 注...
  • hellochenlu
  • hellochenlu
  • 2016年09月17日 11:29
  • 3781

原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)

淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透...
  • qq1623267754
  • qq1623267754
  • 2014年09月08日 15:42
  • 1080

cocos2dx之FadeIn,FadeOut,FadeTo

void MyActionFadeLayer::initLayer() { CCSize size = CCDirector::sharedDirector()->getWinSize(); ...
  • ganpengjin1
  • ganpengjin1
  • 2013年12月12日 23:36
  • 19330

cocos2dx Fadein FadeOut 无效

需要设置子节点跟随父节点一起透明:parent:setCascadeOpacityEnabled(true)
  • AcmHonor
  • AcmHonor
  • 2016年09月06日 13:50
  • 1330

Jquery中淡入淡出效果fadeIn()、fadeOut()、fadeToggle()、fadeTo()学习引发的思考----关于Jquery函数传参数

一、基本语法 1、fadeIn淡入、fadeOut淡出、fadeToggle淡入淡出切换(已经淡出点击淡入,或者相反): $(selector).fadeIn(duration,complete);...
  • u013171165
  • u013171165
  • 2014年10月24日 16:19
  • 2900

jQuery中fadeIn、fadeOut、fadeTo的用法(图片隐藏与显示)

#img1     {         width:400px; height:500px;         }                     $(function ()...
  • linlin2294592017
  • linlin2294592017
  • 2013年05月07日 17:11
  • 7271

原生js实现fadein 和 fadeout

js里面设置DOM节点透明度的函数属性:filter= "alpha(opacity=" + value+ ")"(兼容ie)和opacity=value/100(兼容FF和GG)。 设置透明度的兼容...
  • jin8907
  • jin8907
  • 2017年09月14日 10:38
  • 166

jQuery中 hide和fadeOut的区别 show和fadeIn的区别

原文出外:http://www.yoda360.com/post/22.html hide和fadeOut 显示效果有什么区别? show和fadeIn显示效果都一样? 很多朋友在学习jQuery...
  • chelen_jak
  • chelen_jak
  • 2013年12月19日 17:07
  • 5740

JQury中设置元素淡入淡出(fadeIn/fadeOut/fadeToggle/fadeTo)以及显示隐藏(show/hide)方法

JQuery中的四个Fading方法可以设置元素的淡入淡出,分别如下: fadeIn()用于淡入已经隐藏的元素 $(selector).fadeIn(speed,callback); 其中 speed...
  • xiaokangmiclong
  • xiaokangmiclong
  • 2016年02月03日 22:18
  • 646
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)
举报原因:
原因补充:

(最多只允许输入30个字)