CODEWITHSUNDEEP
jqueryanimationhovertoggleslidetoggle
Vincent Chua
Vincent Chua

Reputation: 1007

How to stop animation after hoverOut?

as inpired from this website: http://www.designchemical.com/lab/jquery/demo/jquery_demo_slick_jquery_sliding_captions.htm

I have created my own version using the code below:

$(document).ready(function(){

  $(".transparencyOverlay").css("display", "none");
  $(".thumbnailTextContainer").css("display", "none");

  $(".contestantFirst, .contestant").hover(function(){
    $(this).children(".transparencyOverlay, .thumbnailTextContainer").slideToggle('slow');
  },function(){
    $(this).children(".transparencyOverlay, .thumbnailTextContainer").slideToggle('slow');
  });

});

The problem is that when I hover in and out consecutively within the images, the animation will continue to run even when my cursor is outside the images, anyone knows how to solve this?

Upvotes: 1

Views: 143

Answers (2)

Jude Osborn
Jude Osborn

Reputation: 1798

Use mouseenter to trigger the animation and then mouseout to stop it with jQuery's stop() function. A generic example:

$('div').mouseenter(function(){
    $(this).slideToggle('slow');
});

$('div').mouseout(function(){
    $(this).stop();
});

jsfiddle

Upvotes: 1

Romaindr
Romaindr

Reputation: 311

Have a look at the jQuery .stop( [clearQueue ] [, jumpToEnd ] ) function

http://api.jquery.com/stop/

Upvotes: 0

Related Questions