title: jQuery animate() on document.ready
body: <p>I am trying to achieve photo zooming effect using this example: <a href="http://www.tympanus.net/Tutorials/PhotoZoomOutEffect/" rel="nofollow">http://www.tympanus.net/Tutorials/PhotoZoomOutEffect/</a> .
  However, I needed to make this effect working after <strong>page load</strong>, not on <strong>hover</strong>.
  So I changed hover() to ready():</p>
  
  <pre><code>    $(function() {
          $('#container img').ready(
              function(){
                var $this = $(this);
                $this.stop().animate({
                    'opacity':'1.0',
                    'height':'200px',
                    'top':'0px',
                    'left':'0px'
                });
             },
             function(){
               var $this = $(this);
               $this.stop().animate({
                'opacity':'0.5',
                'height':'500px',
                'top':'-66.5px',
                'left':'-150px'
               });
             }
          );
      });
  </code></pre>
  
  <p>And then I had the JS error in Chrome debugger:
  Uncaught TypeError: Cannot use 'in' operator to search for 'display' in undefined
  Could someone, please, give me a hint to resolve this issue?</p>
  
  <p>Thanks in advance.</p>