JAVASCRIPT FRAMEWORK .fadeIn() BY YOURSELF

What is framework .fadeIn() ?

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

How to create javascript framework .fadeIn()?

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 .fadeIn().
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 .fadeIn()

Step by step to create framework .fadeIn()

: 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>.fadeIn()</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 : 0.0;
border: 1px solid #000;
margin: 5px;
}

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

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 0 (zero) in var op. Don't forget to return time. Example:


  
   this.fadeIn = function(){
    var e= selector;
    var time, op;
    for (var i = 0, len = e.length; i < len; i++) {
        time = setInterval(fadein, 80);
        op = 0;
        return time;
  
  function fadein() {
   if (op == 9) {
    clearInterval(time);
    e[i].style.opacity = '1.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 fadein(){ enter code }. Okay, Now create effect fadeIn. enter if and else to play and stop it.
"if (opacity == 9) { clear the time and create opacity = 1 or '1.0' ( javascript is not support decimal ) } else { create opacity++ and change the opacity in your css using javascript. }" Example:


  
  function fadein() {
   if (op == 9) {
    clearInterval(time);
    e[i].style.opacity = '1.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').fadeIn(); }); Example:


    
    

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

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 : 0.0;
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>.fadeIn()</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 fadeIn -->
  this.fadeIn = function(){
    var e= selector;
    var time, op;
    for (var i = 0, len = e.length; i < len; i++) {
        time = setInterval(fadein, 80);
        op = 0;
        return time;
  
  function fadein() {
   if (op == 9) {
    clearInterval(time);
    e[i].style.opacity = '1.0';
   } else {
    op++;
    e[i].style.opacity = 0 + '.' + op;
   }
  }
  
      }

  }
  
};

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

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

Komentar

seravina danniella11 Januari 2017 pukul 10.10
In my opinion, great content is above all. So focusing on creating good quality content is the solution.

Web Designer Melbourne
BalasHapus
Balasan
PoL4 Juni 2019 pukul 04.23
hire freelance developer for your next project from the largest and most trusted freelancer site. Learn how you can get even more done with increased productivity and find out why 90% of our customers rehire.
BalasHapus
Balasan
7 kilometer6 Agustus 2019 pukul 12.58
Thank you so much
BalasHapus
Balasan

Tambahkan komentar

7 KILOMETER

Javascript DOM .fadeIn() Framework