PDA

View Full Version : fade in effect



dude9er
10-17-2006, 08:02 PM
I have found a great fade out fade in function that I'm trying to adapt here:
http://www.brainerror.net/scripts_js_blendtrans.php (see fade in and out with one link)

The javascript that runs this fade in out is:



function opacity(id, opacStart, opacEnd, millisec) {
//speed for each frame
var speed = Math.round(millisec / 100);
var timer = 0;

//determine the direction for the blending, if start and end are the same nothing happens
if(opacStart > opacEnd) {
for(i = opacStart; i >= opacEnd; i--) {
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
} else if(opacStart < opacEnd) {
for(i = opacStart; i <= opacEnd; i++)
{
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}
}

//change the opacity for different browsers
function changeOpac(opacity, id) {
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}

function shiftOpacity(id, millisec) {
//if an element is invisible, make it visible, else make it ivisible
if(document.getElementById(id).style.opacity == 0) {
opacity(id, 0, 100, millisec);
} else {
opacity(id, 100, 0, millisec);
}
}


What I need to happen is have the image hidden when the page is loaded and when the hide/show link is pressed have it fade in.

So essentially what I'm looking for is a FADE IN and FADE OUT function rather than a FADE OUT and FADE IN function.

Can someone please help me out with this? I can't seem to figure it out!!!!

Thanks everyone!!!

tech_support
10-18-2006, 05:52 AM
Code:


<script language="JavaScript" type="text/javascript">

function toggle(element,mode){

var toggle1 = document.getElementById(element)
toggle1.style.display = mode
}
</script>
On the img tag put id="image"

On the body tag put onload=toggle('image','none')"

And put in the slide in link (or add it) onclick="toggle('image','block')"

Twey
10-18-2006, 07:08 PM
tech_support: You missed the key point. The OP wants it to fade in. :)

dude9er: Try this script (http://www.twey.co.uk/?q=fading) I developed for exactly this purpose. It's in need of a rewrite (I know more now than I did then, and some of it could be improved), but it should suit your purpose. The code would be something like this:
<img src="myImage.png" id="myImage">
<a href="myImage.png" onclick="document.images['myImage'].fadeThread.toggleFade();">Show/Hide</a>
<script type="text/javascript">
FadableObject(document.images['myImage'], 1, 10, 0, 100, true);
</script>And, of course,
<script type="text/javascript" src="FadableObject.js"></script>in the <head>.