SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Addict Divisive Cotton's Avatar
    Join Date
    Jun 2008
    Location
    Andy lives in London, UK
    Posts
    393
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question (minor) prolbem with JavaScript animdation fadein script

    I have here a working fade out script:

    Code:
    function fadeOut(elem, time) {
    
        var startOpacity, elemId;
    
        elemId = document.getElementById(elem);
    
        startOpacity = elemId.style.opacity || 1;
        elemId.style.opacity = startOpacity;
    
        (function go() {
            elemId.style.opacity -= startOpacity / (time / 100);
    
            elemId.style.filter = 'alpha(opacity=' + elemId.style.opacity * 100 + ')';
    
            if (elemId.style.opacity > 0) {
                setTimeout(go, 100);
            } else {
                elemId.style.display = 'none';
            }
    
        })();
    }
    Below is the above but altered for fade in. It's not working but I'm sure I'm almost there:

    Code:
    function fadeIn(elem, time) {
    
        var startOpacity, elemId;
    
        elemId = document.getElementById(elem);
    
        startOpacity = elemId.style.opacity || 0;
        elemId.style.opacity = startOpacity;
    
        (function go() {
    
            elemId.style.opacity += startOpacity / (time / 100);
    
            //elemId.style.filter = 'alpha(opacity=' + elemId.style.opacity * 100 + ')';
    
            if (elemId.style.opacity < 1) {
                setTimeout(go, 100);
            } else {
                elemId.style.display = 'block';
            }
    
        })();
    }
    Let everyday be Christmas

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,489
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    /*<![CDATA[*/
    function fadeOut(elem,time,ud) {
        var elemId = document.getElementById(elem);
        if (!elemId.zxc){
         elemId.zxc=ud?100:0;
        }
        elemId.style.display = 'block';
        clearTimeout(elemId.to);
        (function go() {
           elemId.zxc+=(ud?-1:1);
           elemId.style.opacity = elemId.zxc/100;
              elemId.style.filter = 'alpha(opacity=' + elemId.zxc + ')';
            if ((ud&&elemId.zxc >1)||(!ud&&elemId.zxc<100)) {
                elemId.to=setTimeout(go, 100);
            } else if (ud){
                elemId.style.display = 'none';
            }
    
        })();
    }
    /*]]>*/
    </script></head>
    
    <body>
    <div id="tst" style="width:200px;height:200px;background-Color:red;" ></div>
    <input type="button" name="" value="FadeOut" onmouseup="fadeOut('tst',1000,true);"/>
    <input type="button" name="" value="FadeIn" onmouseup="fadeOut('tst',1000,false);"/>
    
    </body>
    
    </html>

  3. #3
    SitePoint Addict Divisive Cotton's Avatar
    Join Date
    Jun 2008
    Location
    Andy lives in London, UK
    Posts
    393
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks!
    Let everyday be Christmas


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
  •