Question

I have the following live example at freakyleaf.co.uk/hoverfade/ whereby upon hovering over a tile, the tile background image fades form 1 to 0.25 opacity over 600ms (.tile_img), then text fades from 0 to 1 opacity over 500ms (.overlay). On mouseout, the reverse happens.

This all works fine as long as the mouse leaves only once the mouseover animation has completed. If the mouse leave during the mouseover animation, the tile image fades back to full opacity, but the text does not fade, leaving it visible.

I have the following code:

$(document).ready(function(){
$(".tile").hoverIntent(function() {

$(".tile_img", this).animate({"opacity": "0.25"}, 600,
function() { $(this).next(".overlay").animate({"opacity": "1"}, 500); }
    );
},
function() {
$(".overlay", this).animate({"opacity": "0"}, 500,
function() { $(this).prev(".tile_img").animate({"opacity": "1"}, 600); }
    );
});
});

And HTML:

<div class="wrapper">
  <ul id="service_boxes">
    <li id="sb_recording" class="tile" onClick="location.href='recording.php';" style="cursor: pointer;">
      <h2><a href="recording.php">Recording</a></h2>
      <div class="tile_img"></div>
      <div class="overlay"><p>Vintage analogue warmth and cutting-edge digital technology working in perfect harmony - That's the SoundARC sound!</p></div>
    </li> 
  </ul>
</div>

I understand that I should perhaps use the .stop function but so have tried it in a few places but have only broken the code so far.

I’m not even sure if what I have is the best way to achieve what I want; I have only got to this point purely by chance as I am a complete novice.

Any help would be greatly appreciated.

Many thanks.

Answer 1

You could also solve it by using setInterval to check if the animation is still on, and when it is completed fire the new animation..

$(document).ready(function(){
  $(".tile").hoverIntent(function() {
    $(".tile_img", this).animate({"opacity": "0.25"}, 600, function() { 
      $(this).next(".overlay").animate({"opacity": "1"}, 500); 
    });
  }, function() {
    var self = this;
    var inter = setInterval(function(){
       if(!$(".overlay", self).is(':animated') && !$(".overlay", self).prev(".tile_img").is(':animated') ){
        clearInterval(inter);
        $(".overlay", self).animate({"opacity": "0"}, 500, function() { 
          $(this).prev(".tile_img").animate({"opacity": "1"}, 600); 
        });
      }
    },100);
  });
});