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

Posted 2023-05-08

【中文标题】在多个列表项上使用淡入淡出 jQuery 淡入淡出效果更改图像源

【英文标题】：Change the image source with fade jQuery fade effect on multiple list items

【发布时间】：2013-08-13 02:58:01

【问题描述】：

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

所以我正在尝试这个：

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 替换图像名称？或任何其他简单的动态出路？

【参考方案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
          ;
      );
   ); 

);

【讨论】：

谢谢你，你是救命稻草。

@AvtarNanrey 不客气：D 总是很高兴能挽救这一天！ ;) 谢谢

【参考方案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;
    );
);