title: Jquery animate. Display none css is not changing
body: <p>In the first load of the page the image have to <strong>display:none</strong>. But the problem is, when I put display none, the animate function is not working and I already put a <strong>.css({'display':'block'})</strong> still not working.<br /></p>
  
  <p>Here is my code</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          $("img.fade").hover(function() {
              $(this).stop().animate({ "opacity": "1" }, 300);
              $(this).css({ 'display': 'block' });
          }, function() {
              $(this).stop().animate({ "opacity": "0" }, 300);
          });
      });
  &lt;/script&gt;
  &lt;style type="text/css"&gt;
      img.fade { display:none }
  &lt;/style&gt;
  &lt;img src="image.jpg" class="fade" /&gt;
  </code></pre>
  
  <p>If I remove the <strong>display:none</strong> style, it is working but when the page first loads, image is showing. I need to hide it in the first load then when hovering it will show.</p>