在多个列表项上使用淡入淡出 jQuery 淡入淡出效果更改图像源

Question

我想从具有淡入淡出效果的列表项中更改具有多个悬停在多个图像上的单个图像的来源。

所以我正在尝试这个：

jquery：

$(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;
    }); 
});

HTML：

<ul class="sub_menu">
  <li><a id="image1" href="">Faucets</a></li>
  <li><a id="image2" href="">Showers</a></li>
  <li><a id="image3" href="">Bathwares</a></li>
  <li><a id="image4" href="">Flushing Systems</a></li>
  <li><a id="image5" href="">Bath Accessories</a></li>
  <li><a id="image6" href="">Necessaries</a></li>
  <li><a id="image7" href="">Newly Introduced</a></li>
</ul>

<div id="menu_thumb">
   <a href="">
     <img class="changesrc" src="images/image1.jpg" >
   </a>
</div>

但它只是更改具有第一个 id 的图像。如何用每个 id 替换图像名称？或任何其他简单的动态出路？

Answer 1

http://jsbin.com/abamid/1/edit

$(function(){  // DOM ready shorthand

  $(".sub_menu li a").hover(function(){
      var ID = this.id;                       // get anchor ID
      $(".changesrc").stop().fadeOut(400, function() {
          this.src = "images/"+ ID +".jpg";
          this.onload = function(){           // make sure img is loaded
             $(this).fadeIn(400);             // fadeIn
          };
      });
   }); 

});

Answer 2

$(document).ready(function () {
    $(".sub_menu li").hover(function () {
        var anc_id = $('a', this).attr('id'); // Cache the id

        $(".changesrc").fadeOut(1000, function () {
            var path = "images/";
            $(".changesrc").attr("src", path + anc_id + ".jpg").load(function() {
              $(this).fadeIn(1000);
            });
        });
        return false;
    });
});