How does native JavaScript achieve fade-in and fade-out?

Source: Internet
Author: User
Tags ibase

Fade-in and fade-out results are often used in daily projects. Unfortunately, native JS does not have a similar method, and sometimes a small page is not worth introducing a jQuery library, so I wrote it myself, encapsulated, useful friends can be used directly. The Code also contains a method to set the transparency of elements, which is based on IE rules (0 ~ 100). If it is changed to the standard setting method (0. 00 ~ 1. 00), when using the following, consider floating point exact expression difference. Parameter description: fadeIn () and fadeOut () have three parameters. The first parameter is an event and is required. The second parameter is the fade-in and fade-out speed, positive integer, And the size is weighed by yourself. An optional parameter; third, specify the transparency (similar to fadeTo () in jQuery), 0 ~ A positive integer of 100, which is also an optional parameter.

Effect demonstration

Use a non-IE6 browser and wait until the page is loaded before testing.

Blog: http://www.bkjia.com

Welcome to bkjia.com

Blog: http://www.bkjia.com

Welcome to bkjia.com

Blog: http://www.bkjia.com

Welcome to bkjia.com

JavaScript code
Window. onload = function () {// var iBase = {Id: function (name) {return document. getElementById (name) ;}, // sets the element transparency. The transparency value is calculated according to the IE rule, that is, 0 ~ 100 SetOpacity: function (ev, v) {ev. filters? Ev. style. filter = 'Alpha (opacity = '+ v +') ': ev. style. opacity = v/100; }}// fade-in effect (including fade-in to specified transparency) function fadeIn (elem, speed, opacity) {/** parameter description * elem => elements needing to fade in * speed => fade in speed, positive integer (optional) * opacity => fade in to the specified transparency, 0 ~ 100 (optional) */speed = speed | 20; opacity = opacity | 100; // display the element and set the element value to 0 transparency (invisible) elem. style. display = 'block'; iBase. setOpacity (elem, 0); // The variable value of the initialization transparency is 0 var val = 0; // The transparency value is increased by 5 in a loop, that is, the fade-in effect (function () {iBase. setOpacity (elem, val); val + = 5; if (val <= opacity) {setTimeout (arguments. callee, speed) }}) () ;}// fade-out effect (including fade-out to the specified transparency) function fadeOut (elem, speed, opacity) {/** parameter description * elem ==> elements needing to fade in * speed ==> fade in speed, positive integer (Optional) * opacity ==> fades in to the specified transparency, 0 ~ 100 (optional) */speed = speed | 20; opacity = opacity | 0; // The initial transparency change value is 0 var val = 100; // In a loop, the transparency value is decreased to 5, that is, the fade-out effect (function () {iBase. setOpacity (elem, val); val-= 5; if (val> = opacity) {setTimeout (arguments. callee, speed);} else if (val <0) {// hide the element elem after the transparency of the element is 0. style. display = 'none' ;}}) () ;}var btns = iBase. id ('Demo '). getElementsByTagName ('input'); btns [0]. onclick = function () {fadeIn (iBase. id ('fadin');} btns [1]. onclick = function () {fadeOut (iBase. id ('fadeout'), 40);} btns [2]. onclick = function () {fadeOut (iBase. id ('fadeto '), 20, 10 );}}

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.