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:

PHP Code:


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 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:

Code:

<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,

Code:

<script type="text/javascript" src="FadableObject.js"></script>

in the <head>.

Thread: fade in effect

Thread Tools

Search Thread

fade in effect

Bookmarks

Bookmarks

Posting Permissions