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

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

2 个答案: