jQuery hover mouseover/mouseout timing

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);
  });
});

Answer 2

Try this by stopping the animation using stop method and passing 2 arguments(false, true) corresponding to clearQueue and jumpToEmd.

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

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

Answer 3

The main problem I could see was that the callback to run the second half of the animation meant that if you tried to implement and .stop() functionality it wouldn't run until after the animation had completed. That's I believe what was causing issues, what I have below seems to work; though it's still got some rough edges the problem has gone.

I dumped the usage of hoverIntent as I didn't see the need for it, apologies if I missed the point. I also find that hover is a bit unreliable so I prefer setting in and out states differently. I've also swapped out the animations to the fadeTo function (does the same but a bit tidier to read), and thrown in some dequeue(), though this is mostly out of habit. Some might argue it's pointless but at some point it's become good practice for me.

$(".tile").mouseenter(function() {

    $(".overlay", this).stop(false,true)
    $(".tile_img", this).dequeue().fadeTo(600, 0.25,function(){ 

        $(this).parent().find(".overlay").dequeue().fadeTo(500,1); 

    })

});

$(".tile").mouseleave(function(){

    $(".tile_img", this).stop(false,true)
    $(".overlay", this).dequeue().fadeTo(500,0,function() { 

        $(this).parent().find(".tile_img").dequeue().fadeTo(500,1); 

    });
});