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

I'm trying to set up a pretty basic hover animation in jQuery. Mouse over a div and the major cont

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

Share Improve this question edited Jul 7, 2010 at 8:06 Alastair Pitts asked Jul 5, 2010 at 6:03 Alastair PittsAlastair Pitts 19.6k9 gold badges71 silver badges98 bronze badges
Add a ment  | 

3 Answers 3

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.

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1745499235a4630336.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信