代码之家 › 专栏 › 技术社区 › Alastair Pitts

$.slideToggle()&$.hover()动画队列问题

jquery javascript

Alastair Pitts · 技术社区 · 14 年前

我试图在jQuery中设置一个非常基本的悬停动画。将鼠标移到div上,主要内容向下滑动,鼠标向上滑动,内容向上滑动。

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

这段代码工作得很好,但明显的问题是,如果你很快地鼠标进出动画队列。

为了缓解这种情况,我读到 .stop(true) 函数放在 .slideToggle() 停止上一个动画并清除动画队列。所以我尝试了这个代码:

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

这似乎是加剧了你的速度移动鼠标进出。

我好像搞不懂问题是什么,这个 JSFiddle

编辑:我怀疑这是jQuery1.4.2中的一个错误,并提交了一份错误通知单: http://dev.jquery.com/ticket/6772

3 回复 | 直到 14 年前

Reigel Gallarde 14 年前

尝试

.stop(true,true)

或者你可以用这个 hoverIntent plugin

Devin Walker 12 年前

.stop(true, true)

像冠军一样工作:

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

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

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

    });

Iñaki Bedoya 12 年前

也许更好?

$('.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');
    });
  }
});

这样,队列最多为2个,一个在上升时,另一个在下降时。第一个条件是我们不能呆在地上。

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前