Results 1 to 3 of 3

Thread: fade in effect

  1. #1
    Join Date
    Apr 2006
    Posts
    30
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default fade in effect

    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(idopacStartopacEndmillisec) {
        
    //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(
    opacStart>= opacEndi--) {
                
    setTimeout("changeOpac(" ",'" id "')",(timer speed));
                
    timer++;
            }
        } else if(
    opacStart opacEnd) {
            for(
    opacStart<= opacEndi++)
                {
                
    setTimeout("changeOpac(" ",'" id "')",(timer speed));
                
    timer++;
            }
        }
    }

    //change the opacity for different browsers
    function changeOpac(opacityid) {
        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(idmillisec) {
        
    //if an element is invisible, make it visible, else make it ivisible
        
    if(document.getElementById(id).style.opacity == 0) {
            
    opacity(id0100millisec);
        } else {
            
    opacity(id1000millisec);
        }

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

  2. #2
    Join Date
    May 2006
    Location
    Sydney, Australia - Near the coast.
    Posts
    1,995
    Thanks
    0
    Thanked 8 Times in 7 Posts

    Default

    Code:

    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')"
    Peter - alotofstuffhere[dot]com - Email Me - Donate via PayPal - Got spare hardware? Donate 'em to me :) Just send me a PM.
    Currently: enjoying the early holidays :)
    Read before posting: FAQ | What you CAN'T do with JavaScript | Form Rules | Thread Title Naming Guide

  3. #3
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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>.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •