jQuery fadeIn(), fadeOut() on hover.

I've got the following jQuery code below...
It is applied to several buttons along the top of my site so that when the mouse passes over them it will generate a nice fadeIn/fadeOut hover effect.  It works perfectly except that if I pass the mouse over the buttons very rapidly the fadeIn/fadeOut effects get backed up and when I stop shaking the mouse over the buttons I can sit back an watch all my buttons fade in and fade out several times before they finally come to a rest as they get all caught up to the events I triggered.

That looks stupid.  I would like for one fade effect to be canceled and another one to start immediately when the event is triggered.  So if the mouse passes into and out of the div very quickly then I would want the fadeIn to barely to have begun before it reverses from where it is back to the start.  Hope that makes sense.

I've tried using the stop() method, like this...

$('#btnTransact').click(function () {
  alert('Transactions');
}).hover(function () {
  $('#btnTransact').find('.MasterButtonHover').stop().fadeIn(200);
}, function () {
  $('#btnTransact').find('.MasterButtonHover').stop().fadeOut(200);
});

But this completely breaks it so nothing happens at all.

Any help on this would be greatly appreciated.

Thanks
<script type="text/javascript">
  $(function () {

    $('#btnTransact').click(function () {
      alert('Transactions');
    }).hover(function () {
      $('#btnTransact').find('.MasterButtonHover').fadeIn(200);
    }, function () {
      $('#btnTransact').find('.MasterButtonHover').fadeOut(200);
    });

    $('#btnPlanning').click(function () {
      alert('Planning');
    }).hover(function () {
      $('#btnPlanning').find('.MasterButtonHover').fadeIn(200);
    }, function () {
      $('#btnPlanning').find('.MasterButtonHover').fadeOut(200);
    });

    $('#btnConfig').click(function () {
      alert('Configuration');
    }).hover(function () {
      $('#btnConfig').find('.MasterButtonHover').fadeIn(200);
    }, function () {
      $('#btnConfig').find('.MasterButtonHover').fadeOut(200);
    });

    $('#btnCharts').click(function () {
      alert('Charts');
    }).hover(function () {
      $('#btnCharts').find('.MasterButtonHover').fadeIn(200);
    }, function () {
      $('#btnCharts').find('.MasterButtonHover').fadeOut(200);
    });

    $('#btnLogout').click(function () {
      alert('Logout');
    }).hover(function () {
      $('#btnLogout').find('.MasterButtonHover').fadeIn(200);
    }, function () {
      $('#btnLogout').find('.MasterButtonHover').fadeOut(200);
    });

  });
</script>

Open in new window

josephdaviskcrmAsked:
Who is Participating?
 
Gurvinder Pal SinghConnect With a Mentor Commented:
have you checked this?
http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/ 
there is a demo at the bottom of page, it is also using stop function

and also this
http://aintyomamasblog.com/test/hover/
0
 
drakesheCommented:
You can call
$(#myelement").stop();
THis will stop all animation.
0
 
drakesheCommented:
Didnt notice that you already had tried stop. But I did then notice that you had not used stop correctly!
Try this new code:
$('#btnTransact').click(function () {
  alert('Transactions');
}).hover(function () {
  $('#btnTransact').find('.MasterButtonHover').stop(true, true).fadeIn(200);
}, function () {
  $('#btnTransact').find('.MasterButtonHover').stop(true, true).fadeOut(200);
});

Open in new window

0
 
josephdaviskcrmAuthor Commented:
This is exactly what I was looking for.  Using the stop(true, true) method forces the animation to jerk to the finish before it starts the next animation.  But this technique will reverse the animation from where ever it is currently when the next even is called.

Thanks for this.
0
 
Gurvinder Pal SinghCommented:
thanks for the points
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.