SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smoother Fade In...

    Hi there, I'm using a fade-in script and am having trouble creating a smoother transition.

    Here's the link: http://www.janddmedia.com/temp/

    And Java below:

    Code:
    // JavaScript Document
    function initImage() {
      imageId = 'thephoto';
      image = document.getElementById(imageId);
      setOpacity(image, 0);
      image.style.visibility = 'visible';
      fadeIn(imageId,0);
    }
    
    function setOpacity(obj, opacity) {
      opacity = (opacity == 100)?99.999:opacity;
      
      // IE/Win
      obj.style.filter = "alpha(opacity:"+opacity+")";
      
      // Safari<1.2, Konqueror
      obj.style.KHTMLOpacity = opacity/100;
      
      // Older Mozilla and Firefox
      obj.style.MozOpacity = opacity/100;
      
      // Safari 1.2, newer Firefox and Mozilla, CSS3
      obj.style.opacity = opacity/100;
    }
    
    function fadeIn(objId,opacity) {
      if (document.getElementById) {
        obj = document.getElementById(objId);
        if (opacity <= 100) {
          setOpacity(obj, opacity);
          opacity += 10;
          window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
        }
      }
    }
    Any suggestion on how to make the fade-in smoother would be greatly appreciated.

    Thanks

    Dave

  2. #2
    SitePoint Zealot
    Join Date
    May 2009
    Location
    Netherlands
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Change the rate of change and faster change(total change time remains constant):
    Code:
    function fadeIn(objId,opacity) {
      if (document.getElementById) {
        obj = document.getElementById(objId);
        if (opacity <= 100) {
          setOpacity(obj, opacity);
          opacity += 1;
          window.setTimeout(function(){fadeIn(objId, opacity)}, 10);
        }
      }
    }

  3. #3
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks dogFang, that worked!

    Think it's time to take a JavaScript class!


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
  •