title: Why won't the image fade in with jQuery
body: <p>I'm new to jQuery and I am trying to get a image to fade in but it won't. Can someone tell me what is wrong with the code? Thanks in advance</p>
  
  <p>my Html page looks like this</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;link rel="stylesheet"  type="text/css" href="main.css"&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function(){
          $(".slider#1").fadeIn("slow");
  
  });
  &lt;/script&gt;
  &lt;title&gt;slider&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="slider" &gt;
          &lt;img id="1" src="images/mountain.jpg" alt="Mountain"/&gt;
          &lt;img id="2" src="images/roses.jpg" alt="Roses" /&gt;
          &lt;img id="3" src="images/vilage.jpg" alt="Village"/&gt;
  
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and my css code</p>
  
  <pre><code>* {margin: 0 padding:0}
  
  .slider {
      background-image: url(images/loader.gif);
      background-repeat: no-repeat;
      background-position: center;
      border: 1px solid black;
      overflow: hidden;
      width: 700px;
      height: 400px;
  
  
  }
  
  .slider img {
      display: none;
      width: 700px;
      height: 400px;
  }
  </code></pre>