Jump to content
xisto Community
Sign in to follow this  
Followers 0
Rigaudon

How To Make A Fade-in (or Fade-out) Effect You know, like Google does now

By Rigaudon, in General Discussion

Recommended Posts

Rigaudon    0

Rigaudon
Posted

This is actually very simple, and requires only JavaScript to manipulate styles of HTML elements. There are two things to consider when doing this: speed and increments. The lower the increment, the smoother the effect will be. Speed is self-explanatory.Here's the basic JavaScript function:

function fadeIn(id,increment,speed){	var element = document.getElementById(id);	//Standard	var currentOp = element.style.opacity; 	currentOp = currentOp*1+increment;	element.style.opacity = currentOp;	//IE	var IEOp = element.style.filter;	IEOp = IEOp.replace("alpha(opacity=","");	IEOp = parseInt(IEOp)+(increment*100);	element.style.filter = 'alpha(opacity='+IEOp+')';	if(currentOp<1){		var again = setTimeout(function(){ fadeIn(id); }, speed);	}}

The increment should be between 0 and 1 (somewhere around 0.1 or 0.05) and the speed is in milliseconds (around 50 should work), but you can play with this yourself to get what you like. The id is the id of the element.Similarly, to fade out, it would be the same function, but reversed.

function fadeOut(id,increment,speed){	var element = document.getElementById(id);	//Standard	var currentOp = element.style.opacity; 	currentOp = currentOp*1-increment;	element.style.opacity = currentOp;	//IE	var IEOp = element.style.filter;	IEOp = IEOp.replace("alpha(opacity=","");	IEOp = parseInt(IEOp)-(increment*100);	element.style.filter = 'alpha(opacity='+IEOp+')';	if(currentOp>0){		var again = setTimeout(function(){ fadeOut(id); }, speed);	}}

To put this function into action, you can do a number of triggers. You may want to do it when the document loads (body onload). Google uses onmouseover for the body.Here's a simple html file to show you fade-in in action. It's actually a calculator of some sort I wrote a while back to do the 3x+1 puzzle. Anyways, here it is:Note: the fadeIn function in this program only takes the ID as a parameter, so the speed was constant/increments were constant. 

<html><head><title>© Michael Wu, 3x+1</title><style type="text/css">body {	background:rgb(170,200,256);	padding:30px;	color:#009;	font-weight:400;}h1, h2, h4, h5, h6 {	text-align:center;}td {	text-align:center;	width:100px;	height:50px;}</style><script type="text/javascript">function solve(start){	var datacount = 0;	var start = document.getElementById("start").value;	var inhtml = "<table border='1px' id='htmltab'><tr>";	if(start<=1||start.indexOf(".")!=-1){		alert("Invalid Input. Must be an integer greater than 1.");	}else{		var begin = new Date();	    var	startTime = begin.getTime();		start = parseInt(start);		while(start!=1){			if(start%2==0){				inhtml+="<td style='background-color:gray'>";				inhtml+=start+"/2 = ";				start = start*1/2;				inhtml+=start+"</td>";			}else{				inhtml+="<td style='background-color:white'>"+start+"*3+1 = ";				start = 3*start*1+1;				inhtml+=start+"</td>";			}			datacount++;			if(datacount%15==0){				inhtml+="</tr><tr>";			}		}		var stopTime = new Date();		var end = stopTime.getTime();		var diff = (end-startTime)/1000;		inhtml+="</tr></table><br /><br />";		inhtml+="<div style='text-align:center'>";		inhtml+=datacount+" steps in "+diff+" seconds.";		document.getElementById("html").innerHTML = inhtml;		document.getElementById("htmltab").style.opacity = 0;		document.getElementById("htmltab").style.filter = 'alpha(opacity=0)';		fadeIn("htmltab");	}}function fadeIn(id){	var element = document.getElementById(id);	//Standard	var currentOp = element.style.opacity; 	currentOp = currentOp*1+0.1;	element.style.opacity = currentOp;	//IE	var IEOp = element.style.filter;	IEOp = IEOp.replace("alpha(opacity=","");	IEOp = parseInt(IEOp)+10;	element.style.filter = 'alpha(opacity='+IEOp+')';	if(currentOp<1){		var again = setTimeout(function(){ fadeIn(id); }, 65);	}}</script></head><body><h1>3x+1 puzzle</h1><hr /><h3>Overview</h3><p><pre>	Although no proof exists, the 3x+1 puzzle states that any integer greater than 1 can eventually reach 1 through this algorithm. If the number is even, then it is divided by 2. If it is odd, it is multiplied by 3 and added to 1.This program explores this unproved theorem. After entering an initial value, it will calculate how many steps it takes and show you the steps.Below, the <span style="color:gray"> GRAY </span> boxes show when the number is divided by 2. The <span style="color:white"> WHITE </span> boxes show when the number is multiplied by 3 and added to 1.</pre></p><form>  Starting Value:  <input name="start" id="start" type="text" maxlength="9">  <input type="button" value="Go" onClick="solve()"></form><div id="html"> </div><hr /><div style="text-align:center" id="footer">  <h3>Design and Code © Michael Wu, 2009</h3></div></body></html>

Share this post

Link to post
Share on other sites

Xalor    0

Xalor
Posted

Thanks for the tutorial, very helpful and pretty basic for us to understand, and also thank you for supplying the code. I'm actually learning a bit of javascript the basics only, not the jQuery and library elements, but how the query works, and how you actually get the id or class name, or how to reference a tag, using the Net Tuts thing from Envato, great site by the way, the videos and resources are simply spectacular. Still anyway great explanation and simple language, hope to see more javascript stuff, that doesn't require any flash work and messing with .gifs and .swf files in Flash. On a tangent, Adobe CS5 announced today for all you designers, and coders.

Share this post

Link to post
Share on other sites

Rigaudon    0

Rigaudon
Posted

No problem! I actually recently started learning jquery and it actually IS easier to use to manipulate elements, yet I'm the kind of person who can't stand not understanding how something works. If I had started with jquery, I would be extremely frustrated on trying to UNDERSTAND the code rather than just using it.When I wrote this, I assumed readers already knew what HTML DOM was. I guess I'll be a little clearer in the future for safety.And yes, I'm also extremely excited about dreamweaver cs5 ;)

Share this post

Link to post
Share on other sites

Little Asterisk    1

Little Asterisk
Posted

No problem! I actually recently started learning jquery and it actually IS easier to use to manipulate elements, yet I'm the kind of person who can't stand not understanding how something works.
If I had started with jquery, I would be extremely frustrated on trying to UNDERSTAND the code rather than just using it.

When I wrote this, I assumed readers already knew what HTML DOM was. I guess I'll be a little clearer in the future for safety.

And yes, I'm also extremely excited about dreamweaver cs5 :P


Well, since you have posted the Javascript version here I hope it would be OK that I post the simplest Jquery? If not, someone please warn me before I get banned, or worse ;)

Anyhow, here is the simplest version:

<html><head><!-- The classic stuff like the website title goes here, etc. --><script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script><!-- I just inserted the jquery... --><!-- And now we have the script, where is simply say: When the document is ready, execute: 		get images and on hover do this:		   get any image and fade out slowly;--><script type="text/javascript">	$(function() {				$('img').hover(function() {								  $('img').fadeOut( 'slow' );								  });	  });</script></head><body><!-- here is a sample John Frusciante image that you can hover over --><img src="http://forums.xisto.com/no_longer_exists/; /></body></html>

The upper code is commented, if you'd like to change for it to fade in you'd have to do something like this (only javascript this time):

$(function() {				$('img').hover(function() {								  $('img').fadeIn( 'slow' );								  });	  });


You'll notice that I only changed fadeOut to fadeIn. :P If you want to change the speed, you can change it to 'fast', 'medium' or enter a numeric value in miliseconds, without the quotes.

Hope it was helpful.

Share this post

Link to post
Share on other sites

Rigaudon    0

Rigaudon
Posted

True, but one thing that bugs me with jQuery is that if you don't understand EVERY element what you're trying to do, then you don't really have a grip over what's going on or how it's going to conflict with other code. For example, I like to define my $() function as a "return document.getElementById(id)".You're right though, since jQuery is the "write less do more" js library. I don't know if it's just me, but I can't stand using someone else's code and not completely understand everything that's going on. It makes me rather uneasy, and I'm really not motivated to look through it.

Share this post

Link to post
Share on other sites

Little Asterisk    1

Little Asterisk
Posted

True, but one thing that bugs me with jQuery is that if you don't understand EVERY element what you're trying to do, then you don't really have a grip over what's going on or how it's going to conflict with other code. For example, I like to define my $() function as a "return document.getElementById(id)".
You're right though, since jQuery is the "write less do more" js library. I don't know if it's just me, but I can't stand using someone else's code and not completely understand everything that's going on. It makes me rather uneasy, and I'm really not motivated to look through it.


True, I mostly feel the same when reading tutorials from other sites that are poorly explained so I don't understand a word. I like to go through code and say "Oh yeah, here he made the function that will move the box X pixels on a click" - that kind of thing.

And also, I'm a lot into programming and every now and then I like to read a tutorial about some new programming language (I learned JQuery basics a few weeks ago), so it bugs me a lot when tutorials are very long and too descriptive.
I like to learn a few basics the first day (so I can make the simplest application), and then go through at a moderate pace (that depends on my schedule and free time).

If they start explaining the background code and everything, I just don't want to follow anymore because there is other work I can do... For instance, the blogger API just takes me away, contrary to, let's say, Wordpress or Tumblr (better explanation and text formatting, etc.).

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
Followers 0
Go To Topic Listing
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept