jquery .hover .animation use to switch between a stack of z-index arranged images.

Question

Part A

I have the following:

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

with attached 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;}

and this script

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

});

I would then like to re-use the script on the following:

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

with attached 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; }

I know the image links above are wrong but because I'm a newbie stackoverflow won't let me post with them intact.

I would like to re-use the script or a variation of it to be able to fade between the three z-index arranged images (of a sun rising) but don't know how to get a duplicate version of the script to target the new img classes.

Can anyone point me in the right direction for this?

Thanks.

Answer 1

I wasn't quite sure what you wanted, so I did both.

If a fadehover block also has the animation class, then it will cycle through all the images inside every 1.5 seconds while you hover over the block. Without the animation class, the image will just change to the next one.

I hope all the comments are clear enough so you can understand what I was doing in the script. Oh, and here is a demo of the whole thing.

$(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');

  });

});

---

Update (new demo)

Now that I understand what you need, try this code:

$(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');
  });

});