Javascript DOM .fadeOut() framework

JAVASCRIPT FRAMEWORK .fadeOut() BY YOURSELF

What is framework .fadeOut() ?

The framework .fadeOut() is used to create animate with effect brightness. Usually, in this framework is using opacity to create .fadeOut().

How to create javascript framework .fadeOut()?

Try the demo below. if you not yet reading my article before. Please read it on JAVASCRIPT DOMS .click() BY YOURSELF, Because in this article we use .click() to call the .fadeOut().
Okay, let's try the demo: *Tips : click the button and the HTML element will display with effect fadeIn.

Demo

Hello guys, Welcome to 7kmeter.blogspot.com . This is the example of framework .fadeOut()

Step by step to create framework .fadeOut()

: 1. First, create a HTML file. Next, write a button and a div element (Don't forget to add id and class). Example:

    
<button class="myBtn" id="myBt">Click Me
</button>
<div class="myDemo" id="myD">Hello guys, Welcome to
<a href="http://7kmeter.blogspot.com/">7kmeter.blogspot.com
</a>. This is the example of framework <b>.fadeOut()</b>
</div>

2. After that, create a css file to make the button and div element more wonderfull. Example:

    
    
.myBtn
{
padding : 6px 12px;
background-color : #ffbb00;
border : none;
border-radius : 3px;
margin : auto;
}

.myDemo
{
min-height : 16px;
padding : 6px 12px;
color : #666;
background-color : #f0f0f0;
opacity : 1;
border: 1px solid #000;
margin: 5px;
}

3. And than, create a framework .fadeOut(). Remember We not discuss an article about framework click(), we direct to discuss the framework .fadeOut().

4. And than, create some variable. that is : var e (element) var time and var op (opacity). Create loop to find the id, Enter setInterval(function,time) in var time, and Enter 9 (zero) in var op. Don't forget to return time. Example:

     this.fadeOut = function(){
    var e= selector;
    var time, op;
    for (var i = 0, len = e.length; i < len; i++) {
        time = setInterval(fadeout, 80);
        op = 9;
        return time;
  
  function fadeout() {
   if (op == 0) {
    clearInterval(time);
    e[i].style.opacity = '0.0';
   } else {
    op--;
    e[i].style.opacity = 0 + '.' + op;
   }
  }
  
      }

  }

5. Look at the time = setInterval(fadein, 80). the fadein is used to create a function fadeout(){ enter code }. Okay, Now create effect fadeOut. enter if and else to play and stop it.
"if (opacity == zero) { clear the time and create opacity = 0 or '0.0' ( javascript is not support decimal ) } else { create opacity-- and change the opacity in your css using javascript. }" Example:

    
  function fadeout() {
   if (op == 0) {
    clearInterval(time);
    e[i].style.opacity = '0.0';
   } else {
    op--;
    e[i].style.opacity = 0 + '.' + op;
   }
  }
  
      }

  }

6. Next, if the framework is callback, create a new function using var $. Example:

    
    
var $ = function(selector){
return new DOMS(selector);}

7. Finally, test your framework code using $('button id or class').click(function() { $(' id or class').fadeOut(); }); Example:

    
    

$('#myBt').click(function() {
$('#myD').fadeOut();
});

Full kode

<!DOCTYPE html>
<head>
<meta name="viewport" content="initial-scale=1">
<html>
<head>

<style type="text/css">
.myBtn
{
padding : 6px 12px;
background-color : #ffbb00;
border : none;
border-radius : 3px;
margin : auto;
}

.myDemo
{
min-height : 16px;
padding : 6px 12px;
color : #666;
background-color : #f0f0f0;
opacity : 1;
border: 1px solid #000;
margin: 5px;
}
</style>
<title>
</title>
</head>
<body>
<button class="myBtn" id="myBt">Click Me
</button>
<div class="myDemo" id="myD">Hello guys, Welcome to
<a href="http://7kmeter.blogspot.com/">7kmeter.blogspot.com
</a>. This is the example of framework <b>.fadeOut()</b>
</div>
<!-- my framework -->
<script type="text/javascript">
var DOMS = function (selector) {
  if (typeof selector == "string") {
        selector = document.querySelectorAll(selector);
  }
<!-- the clicker -->
  this.click = function (fun) {
      var el = selector;
      for (var i = 0, len = el.length; i < len; i++) {
        el[i].onclick = fun.bind(el);
      }
      
  }
<!-- the fadeOut -->
  this.fadeOut = function(){
    var e= selector;
    var time, op;
    for (var i = 0, len = e.length; i < len; i++) {
        time = setInterval(fadeout, 80);
        op = 9;
        return time;
  
  function fadeout() {
   if (op == 0) {
    clearInterval(time);
    e[i].style.opacity = '0.0';
   } else {
    op--;
    e[i].style.opacity = 0 + '.' + op;
   }
  }
  
      }

  }
  
};

var $ = function (selector) {
    return new DOMS(selector);
};
</script>

<!-- the caller -->
<script>
$('#myBt').click(function() {$('#myD').fadeOut();
});
</script>
</body>
</html>