JavaScript Forum

**Nathand** · 07-20-2008, 07:36 PM

Is there a free script that fades in & out an image and a block of text beneath it? Kind of like a photo gallery script, I just haven't been able to find one that's simple and does what I want.

**wayfarer07** · 12:43 PM

If you don't find one, I'll write you one sometime tomorrow. No time for me tonight. It is a pretty easy script.

Personally, I use jQuery during most of my development, which has a built in method for handling this.

**Nathand** · 07-20-2008, 08:05 PM

Thanks, I'll keep looking but I would really appreciate the help. I don't know very much about javascript unfortunately.

**wayfarer07** · 03:22 PM

Here you go:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fade In/Out Test</title>
<script>
function fadeOut(thisId, speed) {
    var thisE = document.getElementById(thisId);
    thisE.style.zoom = 1; //needed for IE
    speed = speed/20;
    var i = 100;
    var intervalId = setInterval(function() {
        if(i>=0) {
            thisE.style.opacity = i/100;
            thisE.style.filter = 'alpha(opacity='+i+')';
            i -= 5;
        } else {
            setTimeout(function() {thisE.style.display = "none";}, speed);
            clearInterval(intervalId);
            return false;
        }
    }, speed);
}
function fadeIn(thisId, speed) {
    var thisE = document.getElementById(thisId);
    thisE.style.display = "block";
    thisE.style.zoom = 1; //needed for IE
    thisE.style.opacity = 0;
    thisE.style.filter = "alpha(opacity = 0)";
    speed = speed/20;
    var i = 0;
    var intervalId = setInterval(function() {
        if(i <= 100) {
            thisE.style.opacity = i/100;
            thisE.style.filter = 'alpha(opacity='+i+')';
            i += 5;
        } else {
            clearInterval(intervalId);
            return false;
        }
    }, speed);
}
</script>
</head>

<body>
<p><a href="#" onclick="fadeOut('paragraph1', 400)">Fade Out Paragraph 1</a><br />
<a href="#"  onclick="fadeIn('paragraph2', 400)">Fade In Paragraph 2</a></p>
<p id="paragraph1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut ac nunc eget ligula lobortis tristique. Maecenas et ipsum a dui luctus venenatis. Morbi et nisl. Morbi consequat felis gravida velit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed at odio in pede laoreet consectetuer. Aenean vestibulum velit sed lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas nec dui vitae libero pharetra euismod. Quisque justo turpis, mattis at, dignissim vehicula, aliquam eget, sapien. Etiam at velit eu quam molestie vulputate.</p>
<p id="paragraph2" style="display: none;">Nullam at purus ut mi euismod euismod. Praesent malesuada. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris bibendum orci. Etiam tempor nisl vel purus. Nullam leo diam, porta vitae, laoreet sit amet, consectetuer nec, tortor. Mauris nunc ipsum, elementum non, venenatis ac, bibendum id, tellus. Duis arcu quam, pretium et, aliquam a, molestie a, urna. Proin a mauris eget tellus dictum condimentum. Cras ut urna vitae mi posuere dignissim. Phasellus dui quam, ullamcorper nec, malesuada ut, volutpat at, ante. Maecenas vehicula dolor a lectus. Proin sed libero. Mauris volutpat, nunc eget egestas posuere, orci nibh viverra nisi, non pretium diam ante non est. Vivamus ut sem. Proin dapibus, justo eget imperdiet iaculis, ipsum lectus egestas nisl, in mattis magna urna in mauris. Integer elementum arcu nec leo. Aliquam erat volutpat. Suspendisse ullamcorper, turpis nec tempor laoreet, est quam venenatis odio, et gravida lacus nulla non orci. Ut eu nulla. </p>
</body>
</html>

Unfortunately, when text is faded in on IE, it comes out looking a little lighter than normal text when fully faded in. I haven't been able to find a way around this issue. If anyone has any ideas I'd love to hear them.

The way this works is you place a unique id on the element you wish to target. When you wish to fade in/out an element, use the appropriate function, with the parameters (id, speed), with id being the unique id, and the speed being how fast the transition should take(in milliseconds).

If you want to fade in, first set the display on the element to "none" as I did in the example.

The code is somewhat bloated and should be consolidated since both functions use similar patterns, but it works.

**Nathand** · 07-21-2008, 03:06 PM

Is there any way to get this to work in FF?

**wayfarer07** · 07-21-2008, 03:17 PM

Hmmm... it was working in FF when I first posted it.... then I made a couple tweaks to the code... I'll check it out real quick.

**wayfarer07** · 03:31 PM

Ok, I fixed it. I added something in to try to make the code more efficient, but Firefox choked on for some reason. Anyway, it works now across everything.

I edited the above code, so it can be copied from the same location

***EDIT***
So here is my problem with IE. At full opacity [filter: alpha(opacity=100)], Explorer still displays the text a little thinly. It is easy to add this "style" to an element, as well as transition it to make the fade happen, but I can't seem to remove it, to make the fade-in part end more fully. It seems that if I just remove the filter, the text will be 100% normal. Does anyone know of a way to do this?

I tried:

Code:

thisE.style.filter = "";

but it did nothing.