同一个 XHTML 页面上的多个 Jquery 淡入淡出图像答案

【问题标题】：Multiple Jquery fade images on the same XHTML page同一个 XHTML 页面上的多个 Jquery 淡入淡出图像
【发布时间】：2015-12-30 03:42:06
【问题描述】：

使用jquery 淡入和淡出我页面上的一系列png 图像。它工作得很好（下面的代码）！但是，我想在同一页面上的新表格单元格中创建第二组完全不同的褪色图像，并且无法同时使两者起作用。我认为这很简单，但我是一名新编码员，并且尝试了多种选择均无济于事。我的一组褪色图像的成功代码如下......我需要在表格单元格中重新创建类似的东西吗？

$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 4000);
});

.fadein { position:absolute; left:5; top:0; }
.fadein img { position:absolute; left:0; top:0; }
    
.fadelinks, .faderandom { position:absolute; }
.fadelinks > *, .faderandom > * { position:absolute; }
    
.multipleslides { position:relative; height:563px; width:550px; float:left; }
.multipleslides > * { position:absolute; left:0; top:0; display:block; }

<head>
    <img src="map.png" width="1334" height="786" border="0" usemap="#Map" />
    <map name="Map" id="Map">
      <area shape="poly" coords="80,604,94,654,300,599,286,550" href="doit.html" />
      <area shape="poly" coords="60,535,76,590,347,516,335,461" href="http://WhiteboardCreative.net/" />
      <area shape="poly" coords="43,460,57,519,401,429,384,368" href="whoweart.html" />
    </map>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
    <h1>
    
    <div class="fadein"; align="left">
      <img src="notes active/notes1.png" />
      <img src="notes active/notes4.png" />
      <img src="notes active/notes3.png" />
      <img src="notes active/notes2.png" />
      <img src="notes active/notes5.png" />
      <img src="notes active/notes7.png" />
      <img src="notes active/notes8.png" />
      <img src="notes active/notes9.png" />
      <img src="notes active/notes10.png" /></div>
    </div>
    <h2>
</body>

【问题讨论】：

P.S：您的文档中有额外的</div><h2>（可能是复制/粘贴错字？）

标签： jquery png jquery html image fadein fade

【解决方案1】：

只需定位.each() 包装器集.fadein 父母：

$(".fadein").each(function(){
    // Now use `$(this)` to reference to the .fadein
    $(this).find('img:gt(0)').hide();
    setInterval(function(){
        $(this).find('img:first-child').fadeOut().next('img').fadeIn().end().appendTo( this );
    }, 4000);
});

【讨论】：