jquery .hover .animation 用于在一堆 z-index 排列的图像之间切换

Question

A 部分

我有以下内容：

<div class="graphic fadehover" class="last">                
<img src="graphic5test image" alt="" class="a" />
<img src="graphic5-2test image" alt="" class="b" />
</div>  

带有附加的 css

.fadehover {display: block; height: 162px; margin: 70px 45px 0 0; position:relative;       width: 292px; z-index: 100; }
img.a {position: absolute; left: 0; top: 0; z-index: 10;}
img.b {position: absolute; left: 0; top: 0;}

和此脚本

$(document).ready(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});

});

然后我想重新-使用以下脚本：

<div class="animation" class="fadehover">

    <img src="/sun-low image" alt="sun rising" class=""/>
    <img src="/sun-hi image" alt="sun rising" class=""/>        
    <img src="/sun-hi image" alt="sun rising" class=""/>        
</div>

带有附加的CSS：

.animation {position: absolute; left: 675px; top: 10px; z-index: 25; } /*positions     sunrise and hills */

.hills{position: absolute; left: 340px; z-index: 50; }

img.e {position: absolute; left: 0; top: 0; z-index: 10;}
img.f {position: absolute; left: 0; top: 0; z-index:2; }

我知道上面的图像链接是错误的，但因为我是新手，stackoverflow 不会让我完整地发布它们。

我想重新使用该脚本或其变体，以便能够在三个 z-index 排列的图像（太阳升起的图像）之间淡入淡出，但不知道如何获取脚本的重复版本来定位新的 img 类。

有人能指出我正确的方向吗？

谢谢。

Answer 1

我不太确定你想要什么，所以我两者都做了。

如果 fadehover 块也具有 animation 类，那么当您将鼠标悬停在该块上时，它将每 1.5 秒循环浏览一次内部的所有图像。如果没有 animation 类，图像将仅更改为下一张。

我希望所有的评论都足够清楚，以便您能够理解我在脚本中所做的事情。哦，这是整个过程的演示。

$(document).ready(function(){

 // make first image in each block the current image & hide the rest
 $(".fadehover").each(function(){
  $(this).find("img:first").addClass("current");
  $(this).find("img:not(:first)").hide();
 });

 // display next image
 var timer,
  nextImg = function(el) {
   // fadeout current image
   var curImg = el.find('img.current')
    .removeClass('current')
    .stop(true, true).fadeOut('slow');
   // find next image; if no next image exist, reset to the first one
   curImg = (curImg.next().length) ? curImg.next() :  curImg.parent().find('img:first');
   // fadein current (next) image
   curImg
    .addClass('current')
    .fadeIn('slow');
  };

 // cycle through each image on hover
 $(".fadehover").hover(function(){
   var el = $(this);

   // if the fadehover has the animation class, then cycle through the images while hovering
   if (el.is('.animation')) {
    timer = setInterval(function(){ nextImg(el); }, 1500);
   }
   // no animation, just show the next image on hover
   nextImg(el);

  }, function(){
   var el = $(this);

   // on mouseout, stop animation, or do nothing
   if (el.is('.animation')) {
    clearInterval(timer);
   }
   // fadeIn, just in case the clearInterval breaks the animation
   el.find('.current').stop(true, true).fadeIn('slow');

  });

});

---

更新（新演示）

现在我了解您需要什么，请尝试以下代码：

$(document).ready(function(){

 // make first image in each block the current image & hide the rest
 $(".fadehover").each(function(){
  $(this).find("img:first").addClass("current");
  $(this).find("img:not(:first)").hide();
 });

 // display next image
 var timer,
  nextImg = function(el) {
   // fadeout current image
   var curImg = el.find('img.current')
   // find next image; if no next image exist, add "done" class
   if (curImg.next().length) {
    // fadein current (next) image
    curImg
     .removeClass('current')
     .stop(true, true).fadeOut('slow')
     .next()
     .addClass('current')
     .fadeIn('slow');
   } else {
    el.addClass('done');
   }

  };

 // cycle through each image on hover
 $(".fadehover").hover(function(){
   var el = $(this);
   // if the element has the "done" class, then stop
   if (!el.is('done')) {
    timer = setInterval(function(){ nextImg(el); }, 2000);
   }
  }, function(){
   var el = $(this);
   if (el.is('done')) { return; }
   // on mouseout, stop animation
   clearInterval(timer);
   // fadeIn, just in case the clearInterval breaks the animation
   el.find('.current').stop(true, true).fadeIn('slow');
  });

});