How js achieves fade-in and fade-out effect _ javascript tips-js tutorial

Source: Internet
Author: User
Tags ibase
This article mainly introduces how native js achieves fade-in and fade-out effects. The article provides you with a encapsulated code. If you need it, you can refer to the fade-in and fade-out effects, it is often used in daily projects. Unfortunately, there is no similar method for native JS, and sometimes a small page is not worth introducing a jQuery library, so I wrote one myself, which is 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:
Both fadeIn () and fadeOut () have three parameters. The first one isEvent, Required. The second isFade-in and fade-out speed, Positive integer, which can be weighed by itself. An optional parameter. The third parameter is specified.Transparency of Fade-in and fade-out(Similar to fadeTo () in jQuery), 0 ~ A positive integer of 100, which is also an optional parameter.
Key code:

// 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) */speedspeed = speed | 20; opacityopacity = 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 to fade in * Speed => fade-in speed, positive integer (optional) * opacity => fade-in to the specified transparency, 0 ~ 100 (optional) */speedspeed = speed | 20; opacityopacity = 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 ';}})();}

:

Core code. You canView results directly

   
  Native JS achieves fade-in and fade-out effect Script 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) */speedspeed = speed | 20; opacityopacity = 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 to fade in * Speed => fade-in speed, positive integer (optional) * opacity => fade-in to the specified transparency, 0 ~ 100 (optional) */speedspeed = speed | 20; opacityopacity = 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);} script   
  

Foot home

A professional website construction resource and Script Programming learning website in China, provides programming materials such as asp, php, asp.net, javascript, jquery, vbscript, dos batch processing, web page creation, network programming, and website construction.

Foot home

A professional website construction resource and Script Programming learning website in China, provides programming materials such as asp, php, asp.net, javascript, jquery, vbscript, dos batch processing, web page creation, network programming, and website construction.

Foot home

A professional website construction resource and Script Programming learning website in China, provides programming materials such as asp, php, asp.net, javascript, jquery, vbscript, dos batch processing, web page creation, network programming, and website construction.

The above is all the code for native js to implement the fade-in and fade-out effect. I hope it will be helpful for your learning.

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.