jQuery - 当点击元素太快时，动画就会出错 [英] jQuery - when clicking on elements too fast animations get buggy

问题描述

我一直在研究这个jQuery效果，这是小提琴：
http：/ /jsfiddle.net/abtPH/26/

I've been working on this jQuery effect heres the fiddle: http://jsfiddle.net/abtPH/26/

到目前为止，一切都很不错，但是当我点击元素太快时，似乎得到越野车并获得奇怪的行为。如果你花时间点击元素就可以了。

Everything's pretty good so far, however when I click on the elements too fast it seems to get buggy and get weird behavior. If you take your time and click on the elements it works fine.

我尝试过使用：animate

用于确保动画在用户点击下一个动画之前结束的内容。我不喜欢这种方法，因为从最终用户看来，效果似乎是滞后的。我希望用户能够快速单击元素并获得所需的效果。

stuff to make sure the animation ends before the user can click on the next one. I do not like this approach though because from a end user it seems like the effects are laggy. I want the user to be able to click on the elements fast and have the desired effect.

这是我到目前为止的jQuery：

Here's my jQuery so far:

$('li').on('click', function (e) {
    e.preventDefault();
    var active = $(this).siblings('.active');
    var posTop = ($(this).position()).top;
    if (active.length > 0) {
        var activeTop = (active.position()).top;
        if (activeTop == posTop) {
            $(this).find('.outer').fadeIn('medium', function () {
                active.toggleClass('active', 400).find('.outer').fadeOut('medium');
            });

        } else {
            $(this).siblings('.active').toggleClass('active', 400).find('.outer').slideToggle();
            $(this).find('.outer').slideToggle();
        }
    } else {
        $(this).find('.outer').slideToggle();
    }
    $(this).toggleClass('active', 400);
});
$('.outer').on('click', function (e) {
    return false;
});

推荐答案

使用。完成（）在开始新动画之前完成所有排队的动画

Use .finish() complete all the queued animation before beginning a new one

$('li').on('click', function(e){
    e.preventDefault();
    var active = $(this).siblings('.active');
    var posTop = ($(this).position()).top;
    if (active.length > 0) {
        var activeTop = (active.position()).top;
        if (activeTop == posTop) {
            $(this).find('.outer').finish().fadeIn('medium', function(){ 
                active.finish().toggleClass('active', 400).find('.outer').finish().fadeOut('medium');
            });

        } else {
            $(this).siblings('.active').finish().toggleClass('active', 400).find('.outer').finish().slideToggle();
            $(this).find('.outer').finish().slideToggle();
        }
    } else {
        $(this).find('.outer').finish().slideToggle();
    }
    $(this).finish().toggleClass('active', 400);
});
$('.outer').on('click', function(e){
    return false;
});

演示：小提琴

这篇关于jQuery - 当点击元素太快时，动画就会出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！