<!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" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>jQuery FadeIn Problem</title>
    <style type="text/css" media="screen">
    <!--
      BODY { margin: 10px; padding: 0; font: 1em "Trebuchet MS", verdana, arial, sans-serif; font-size: 100%; }
      H1 { margin-bottom: 2px; }
      DIV.container { margin: auto; width: 90%; margin-bottom: 10px;}
      TEXTAREA { width: 80%;}
      FIELDSET { border: 1px solid #ccc; padding: 1em; margin: 0; }
      LEGEND { color: #ccc; font-size: 120%; }
      INPUT, TEXTAREA { font-family: Arial, verdana; font-size: 125%; padding: 7px; border: 1px solid #999; }
      LABEL { display: block; margin-top: 10px; } 
      IMG { vertical-align: top; }
      #images LI {
          padding: 10px;
          height: 64px;
      }
      
      #img3 {
          display: none;
      }
      
      #versions {
          float: right;
          margin-right: 300px;
      }
      
      #tests {
          clear: left;
          float: right;
      }
    -->
    </style>

    <script type="text/javascript" src="<?= @$_GET['patch'] ? 'jquery.js' : 'http://jqueryjs.googlecode.com/files/jquery-1.2.2.min.js'; ?>"></script>
    

    <script type="text/javascript" charset="utf-8" id="bootup">  
        /*
        var version = '1.2.2';
        if (window.location.search) {
            version = window.location.search.substr(1);
        }
        
        var script = document.createElement('script');
        
        script.onload = function () {
            // $('#img3').hide();
            // $('#img4').css('display', 'none');


            $('#tests a').click(function () {
                window['test' + this.rel]();

                return false;
            });

            $('h1').append(' - loaded with jQuery ' + $(document).jquery);

            // test5();
        };
        
        
        script.src = 'http://jqueryjs.googlecode.com/files/jquery-' + version + '.js?' + Math.random();
        // var ptr = document.getElementById('bootup');
        // ptr.parentNode.insertBefore(s, ptr.nextSibling);
        document.getElementsByTagName('head')[0].appendChild(script);
        
        */
        
        $(function () {
            $('#img5').hide();
            $('#img6').css('display', 'none');
            $('#img7').css('display', '');

            $('#tests a').click(function () {
                if (this.rel < 3)
                    window['test' + this.rel]();
                else if (this.rel == 7) 
                    $('#img' + this.rel).fadeOut('slow');
                else 
                    $('#img' + this.rel).fadeIn('slow');

                return false;
            });
            
            for (var i = 1; i <= 7; i++) {
                //console.log($('#img' + i).css('display'));
            }

            $('h1').append(' - loaded with jQuery ' + $(document).jquery);
        });
    
        function test1() {
            var img = new Image();
            $(img).load(function () {
                $(this).hide();
                $('#images li:nth(0)').empty().append(this);
                $(this).fadeIn('slow');
            }).attr('src', 'http://farm3.static.flickr.com/2109/2183698916_0ae46f15c4_s.jpg'); //'?' + Math.random());
        }

        function test2() {
            var img = new Image();
            $(img).load(function () {
                this.style.display = 'none';
                $('#images li:nth(1)').empty().append(this);
                $(this).fadeIn('slow');
            }).attr('src', 'http://farm3.static.flickr.com/2109/2183698916_0ae46f15c4_s.jpg'); //'?' + Math.random());
        }
    //-->
    </script>
  </head>
  <body id="page">
    <h1>jQuery FadeIn Problem</h1>
    
    <!--<div id="versions">
        <h2>jQuery Versions</h2>
        <ul>
            <li><a href="?1.2.2">1.2.2</a></li>
            <li><a href="?1.2.1">1.2.1</a></li>
            <li><a href="?1.2">1.2</a></li>
        </ul>
    </div>-->
    <div id="tests">
        <h2>Tests</h2>
        <ol>
            <li><a rel="1" href="#?">Load new image and fade in hidden image via <code>.hide()</code></a></li>
            <li><a rel="2" href="#?">Load new image and fade in hidden image via <code>.style.display = none</code></a></li>
            <li><a rel="3" href="#?">Fade in image hidden via CSS</a></li>
            <li><a rel="4" href="#?">Fade in image hidden via <code>style="display: none;"</code></a></li>
            <li><a rel="5" href="#?">Fade in image hidden via <code>.hide()</code></a></li>
            <li><a rel="6" href="#?">Fade in image hidden via <code>.css('display', 'none')</code></a></li>
            <li><a rel="7" href="#?">Fade out image hidden via <code>.style.display=''</code></a></li>
        </ol>
    </div>
    
    <h2>Result Images</h2>
    <ol id="images">
        <li></li>
        <li></li>
        <li><img id="img3" src="http://farm3.static.flickr.com/2109/2183698916_0ae46f15c4_s.jpg" /></li>
        <li><img id="img4" style="display: none;" src="http://farm3.static.flickr.com/2109/2183698916_0ae46f15c4_s.jpg" /></li>
        <li><img id="img5" src="http://farm3.static.flickr.com/2109/2183698916_0ae46f15c4_s.jpg" /></li>
        <li><img id="img6" src="http://farm3.static.flickr.com/2109/2183698916_0ae46f15c4_s.jpg" /></li>
        <li><img id="img7" src="http://farm3.static.flickr.com/2109/2183698916_0ae46f15c4_s.jpg" /></li>
    </ol>    
  </body>
</html>





