jquery - 同一个 XHTML 页面上的多个 Jquery 淡入淡出图像

标签 jquery html image fadein fade

使用 淡入淡出一系列 我页面上的图像。效果很好(下面的代码)!但是,我想在同一页上的一个新表格单元格内创建第二组完全不同的褪色图像,但我无法同时使两者发挥作用。我认为这很简单,但我是一名新编码员,并且尝试了多种选择但无济于事。我对单组褪色图像的成功代码如下...我需要什么才能在表格单元格内重新创建类似的东西?

$(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>

最佳答案

简单地定位 .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);
});

关于jquery - 同一个 XHTML 页面上的多个 Jquery 淡入淡出图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32898533/

相关文章:

javascript - 如何更改 Handsontable 中已更改单元格的颜色?

javascript - 通过类名选择动态添加的元素

css - 如何在标题元素内将导航元素显示在彼此下方

c++ - 在 OpenCV 中移动图像的最快方法

swift - 无法加载从带有标识符的包中的 Nib 引用的 “” 图像

android - 我的应用程序在主线程中做了太多工作,无法在 android 中从 SD 加载图像

javascript - 使用 jquery 编辑现有的内联样式?

jquery - 版本变更jquery错误

html - IE 中的占位符相关问题

javascript - 一个事件处理程序在 jquery 中否定另一个事件处理程序 -- click()