JQuery hover

Question

I have the following live example in freakyleaf.co.uk/hoverfade/ , due to which, when falling over a tile, the background image of the tile disappears from 1 to 0.25 opacity 600ms (.tile_img), then the text disappears from 0 to 1 opacity for more than 500 ms (. overlay). When you mouse out, the opposite happens.

All this works fine until the mouse leaves only after the animation is complete. If the mouse leaves during the mouse animation, the tile image disappears to full opacity, but the text does not disappear, 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 the SoundARC sound!</p></div> </li> </ul> </div> 

I understand that I should probably use the .stop function, but I tried this in several places, but so far I have broken the code.

I'm not even sure that I have a better way to achieve what I want; I only got to this point by accident, as I am a complete beginner.

Any help would be greatly appreciated.

Thank you very much.

Answer 1

You can also solve this problem by using setInterval to check if the animation is turned on, and when it is completed, the fire of 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 the 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 start the second half of the animation meant that if you try to implement and use the .stop () functions, it will not work until the animation finishes. What I believe is causing the problems, what I have seems to work; although he still has some rough edges, the problem is gone.

I dropped the use of hoverIntent as I did not see the need for this, apologies if I missed this. I also find that the hang is a bit unreliable, so I prefer to set the states on and off in different ways. I also changed the animation to the fadeTo function (does the same, but a little more neatly to read), and selected some dequeue (), although this is mostly out of habit. Some may argue that this is pointless, but at some point it will 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); }); });