javascript - $.slideToggle() & $.hover() animation queue issue - Stack Overflow

admin管理员组

文章数量:1427496

I'm trying to set up a pretty basic hover animation in jQuery. Mouse over a div and the major content is slid down, mouse up and it slides up.

<script type="text/javascript">
    $(function () {
        $('.listItem').hover(function () {
            $(this).find('.errorData').slideToggle('slow');
        });
    });</script>

This piece of code works fine, but the obvious problem is the animation queuing if you mouse in and out really quickly.

To alleviate this I have read that the .stop(true) function placed before the .slideToggle() stops the previous animation and clears the animation queue. So I tried this code:

<script type="text/javascript">
    $(function () {
        $('.listItem').hover(function () {
            $(this).find('.errorData').stop(true).slideToggle('slow');
        });
    });</script>

My problem now is that this only seems to work on the first mousein and mouseout. After that the animations no longer trigger and nothing happens. This is Google Chrome DEV channel.

This seems to be exacerbated by how fast you move the mouse in and out.

I can't seem to work out what the issue is, this JSFiddle has a working (and breaking on my puter) example.

EDIT: I suspect this is a bug in jQuery 1.4.2 and have lodged a bug ticket:

I'm trying to set up a pretty basic hover animation in jQuery. Mouse over a div and the major content is slid down, mouse up and it slides up.

<script type="text/javascript">
    $(function () {
        $('.listItem').hover(function () {
            $(this).find('.errorData').slideToggle('slow');
        });
    });</script>

This piece of code works fine, but the obvious problem is the animation queuing if you mouse in and out really quickly.

To alleviate this I have read that the .stop(true) function placed before the .slideToggle() stops the previous animation and clears the animation queue. So I tried this code:

<script type="text/javascript">
    $(function () {
        $('.listItem').hover(function () {
            $(this).find('.errorData').stop(true).slideToggle('slow');
        });
    });</script>

My problem now is that this only seems to work on the first mousein and mouseout. After that the animations no longer trigger and nothing happens. This is Google Chrome DEV channel.

This seems to be exacerbated by how fast you move the mouse in and out.

I can't seem to work out what the issue is, this JSFiddle has a working (and breaking on my puter) example.

EDIT: I suspect this is a bug in jQuery 1.4.2 and have lodged a bug ticket: http://dev.jquery./ticket/6772

• javascript
• jquery

Share Improve this question Follow edited Jul 7, 2010 at 8:06 Alastair Pitts asked Jul 5, 2010 at 6:03 Alastair PittsAlastair Pitts 19.6k99 gold badges7171 silver badges9898 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

try

.stop(true,true)

---

or you can use this hoverIntent plugin

.stop(true, true)

works like a champ:

  $('.subpage-block').hover(function(){

        $('.subpage-block-heading span', this).stop(true,true).fadeToggle('fast');

           $('.subpage-block-content', this).stop(true,true).slideToggle();

    });

MayBe better?

$('.listitem').hover(function(){
  if (!$(this).find('.errorData').hasClass('down') &&
      !$(this).find('.errorData').hasClass('up')) {
    $(this).find('.errorData').addClass('down').slideDown('fast', function() {
      $(this).removeClass('down');
    });
  }
}, function() {
  if (!$(this).find('.errorData').hasClass('up')) {
    $(this).find('.errorData').addClass('up').slideUp('fast', function() {
      $(this).removeClass('up');
    });
  }
});

This way the queue is at most 2, one when is up and other when is down. With the first condition we prevents to stay down.

本文标签： javascriptslideToggle() amp hover() animation queue issueStack Overflow