title: Change the image source with fade jQuery fade effect on multiple list items
body: <p>I want to change the single image's source with multiple images on multiple hovers from the list items with fade effect.</p>
  
  <p>So I am trying this:</p>
  
  <p>Jquery:</p>
  
  <pre><code>$(document).ready(function(){
      $(".sub_menu li").hover(function(){
          $(".changesrc").fadeOut(1000, function() {
              var path = "images/";
              $(".changesrc").attr("src",path + $(".sub_menu1 li a").attr("id") + ".jpg");
          }).fadeIn(1000);
          return false;
      }); 
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul class="sub_menu"&gt;
    &lt;li&gt;&lt;a id="image1" href=""&gt;Faucets&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a id="image2" href=""&gt;Showers&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a id="image3" href=""&gt;Bathwares&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a id="image4" href=""&gt;Flushing Systems&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a id="image5" href=""&gt;Bath Accessories&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a id="image6" href=""&gt;Necessaries&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a id="image7" href=""&gt;Newly Introduced&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div id="menu_thumb"&gt;
     &lt;a href=""&gt;
       &lt;img class="changesrc" src="images/image1.jpg" &gt;
     &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But it is only changing the image with first id. How can I replace the image name with each id? or any other simple dynamic way out?</p>