My Programming Tricks

Caveman Blogger

If you want to know how to write your own animation function such as those in JQuery, here is one of them. Please note that this is not to replace your JQuery scripts, it is just for those who are curious about how it can be done without JQuery.

Note: I also have similar codes for movement/animation here. You can combine these two capabilities to make it fade while moving. Of course, that can be a bit challenging.

Here are the codes:

<html>
<script>

var fadeSpeed = 100;

function fadeObj(elemName) {

this.name = elemName;
this.opacity = -1; // -1 indicates a new obj
this.timer;

this.fadeOut = function(delay) {
  if (this.opacity == -1) {
   setOpacity(this.name,10);
   this.opacity = 10;
  }
  var tempObj = this;
  setTimeout(function(){tempObj.timer = setInterval(function() { fade(tempObj,'out'); },fadeSpeed)},delay);
};

this.fadeIn = function(delay) {
  if (this.opacity == -1) {
   setOpacity(this.name,0);
   this.opacity = 0;
  }
  var tempObj = this;
  setTimeout(function(){tempObj.timer = setInterval(function() { fade(tempObj,'in'); },fadeSpeed)},delay);
};

}

function fade(obj,direction) {

if (direction == 'out') {
  obj.opacity--;
  if (obj.opacity >= 0) {
   setOpacity(obj.name,obj.opacity);
  }
  else {
   clearInterval(obj.timer);
  }
}
else {
  obj.opacity++;
  if (obj.opacity <= 10) {
   setOpacity(obj.name,obj.opacity);
  }
  else {
   clearInterval(obj.timer);
  }
}

}

function setOpacity(elemName,value) { // opacity from 0 to 10

document.getElementById(elemName).style.MozOpacity = value/10;
document.getElementById(elemName).style.opacity = value/10;
document.getElementById(elemName).style.filter = 'alpha(opacity=' + value*10 + ')';

}

</script>

<body>
<span id="fadeMe" style="height:100px">Hello</span>

<script>
var helloObj = new fadeObj('fadeMe');
helloObj.fadeOut();
helloObj.fadeIn(2000); // fade in 2000ms later
</script>

</body>
</html>

The 'Hello' text will first fade out and fade back in. I create an object to handle the element by keep tracking of its opacity, element name and timer. Then I sent to a timer to do the fading process. You can also add some other function to it such as fading non-stop, fade from one opacity value to another, avoid double fading events on the same element. I just show you the most basic form of the fading function. You can add a lot more fun to it.

You can also do something cool like this using my codes above:

<body>

<span id="fadeMe1" style="height:100px">H</span><span id="fadeMe2" style="height:100px">e</span><span id="fadeMe3" style="height:100px">l</span><span id="fadeMe4" style="height:100px">l</span><span id="fadeMe5" style="height:100px">o</span>

<script>

var helloElem1 = new fadeObj('fadeMe1');
var helloElem2 = new fadeObj('fadeMe2');
var helloElem3 = new fadeObj('fadeMe3');
var helloElem4 = new fadeObj('fadeMe4');
var helloElem5 = new fadeObj('fadeMe5');

helloElem1.fadeOut(0);
helloElem2.fadeOut(100);
helloElem3.fadeOut(200);
helloElem4.fadeOut(300);
helloElem5.fadeOut(400);
helloElem1.fadeIn(2200);
helloElem2.fadeIn(2400);
helloElem3.fadeIn(2600);
helloElem4.fadeIn(2800);
helloElem5.fadeIn(3000);

</script>

Replace those codes in the body tag with those above. Enjoy!

P.S.: For this to work on IE, you need to specify the width or height for the <span> you are working with.

My Programming Tricks

Labels

Wednesday, December 10, 2014

Simple Javascript Fade In/Out Function without JQuery

1 comment: