81742

How to prevent jquery hover event from firing when not complete?

Question:

Here is where I am having difficulty:

$('div.sidebar_content_con').hover(function () { $(this).children('.sidebar_details_container').slideDown(500, function() { $(this).children('.sidebar_details, .sidebar_click').fadeIn(500); }); },function(){ $(this).children('.sidebar_details_container').slideUp(500) $('.sidebar_details, .sidebar_click').fadeOut(500); });

The problem is that multiple hover events can fire while the slideDown and fadeIn animations are occurring. Ideally, only 1 hover event should be firing and if the user is no longer hovering over the div.sidebar_content_con it should stop the animation right there.

Answer1:

Add in some stop()s

$('div.sidebar_content_con').hover(function () { $(this).children('.sidebar_details_container').stop(true, true).slideDown(500, function() { $(this).children('.sidebar_details, .sidebar_click').stop(true, true).fadeIn(500); }); },function(){ $(this).children('.sidebar_details_container').stop(true, true).slideUp(500) $('.sidebar_details, .sidebar_click').stop(true, true).fadeOut(500); });

Answer2:

You could use stopImmediatePropagation() on the event to avoid it bubbling aup and firing other events

$('div.sidebar_content_con').hover(function (event) { event.stopImmediatePropagation(); $('div.sidebar_content_con').hover(function () { $(this).children('.sidebar_details_container').stop(true, true).slideDown(500, function()

Answer3:

Try adding .stop() to the chain of functions (http://api.jquery.com/stop/):

$('div.sidebar_content_con').hover(function () { $(this).children('.sidebar_details_container').stop().slideDown(500, function() { $(this).children('.sidebar_details, .sidebar_click').stop().fadeIn(500); }); },function(){ $(this).children('.sidebar_details_container').stop().slideUp(500) $('.sidebar_details, .sidebar_click').stop().fadeOut(500); });

Answer4:

You need to stop the propagation of the event with the stop() method.

$('div.sidebar_content_con').hover(function () { $(this).children('.sidebar_details_container').stop('true, true).slideDown(500, function() { $(this).children('.sidebar_details, .sidebar_click').stop('true, true).fadeIn(500); }); },function(){ $(this).children('.sidebar_details_container').stop('true, true).slideUp(500) $('.sidebar_details, .sidebar_click').stop('true, true).fadeOut(500); });

Recommend

  • jQuery menu toggleSlide with hover?
  • layout / masonry - delayed layout adjustment - one click behind
  • Jquery Dropdown on Click
  • slidedown and slideup looping bug in firefox
  • Pop up box to appear once per site visit
  • onmouseover onmouseout fadeIn fadeOut no jQuery
  • Reducing BitmapDrawable size
  • Fading in large images in Chrome
  • How to change slowly background attributes in jquery?
  • format JSON value with a php function and print result inside a div#id
  • Android fade in not working
  • this class is not key value coding-compliant for the key PerformRotate
  • TFS edit build log using custom activity
  • Where to put clearQueue in jQuery code
  • Chrome breakpoint on radio doesn't fire
  • Is there an API (SOAP, JSON, XML-RPC, REST, anything) to Google Code Issues?
  • How to get the index of element in the List in c#
  • Small video playback
  • Implementation of RTTI using typeid
  • Using an STL Iterator without initialising it
  • div fade-in when window is scrolled a certain distance from the top
  • Android onKey w/ virtual keyboard
  • How do I Dispose a HttpResponseMessage in my Web Api Method?
  • Bash if statement with multiple conditions
  • Can someone please explain to me in the most layman terms how to use EventArgs?
  • presentShareDialogWithParams posts to FB wall, but callback handler results say error
  • how to display data from 1st point on words on y axis for line chart in d3.js
  • Ionic 2 storage is not cleaning up on uninstall - Only for signed APK
  • Row Count Is Returning the incorrect number using RaptureXML
  • Repeat a vertical line on every page in Report Builder / SSRS
  • Android screen density dpi vs ppi
  • Bug in WPF DataGrid
  • Menu Color Fade on Hover with Jquery
  • WinForms: two way TextBox problem
  • Join two tables and save into third-sql
  • How to model a transition system with SPIN
  • Why is the timeout on a windows udp receive socket always 500ms longer than set by SO_RCVTIMEO?
  • ORA-29908: missing primary invocation for ancillary operator
  • Converting MP3 duration time
  • java string with new operator and a literal