Question

我一直在研究这个jQuery效果继承人的小提琴：的 http://jsfiddle.net/abtPH/26/

到目前为止一切都很好，但是当我点击元素太快时，它似乎变得越来越麻烦并且变得奇怪。如果你花时间点击元素就可以了。

我尝试过使用:animate

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

到目前为止，这是我的jQuery：

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

Answer 1

在开始新动画之前，使用.finish()完成所有排队的动画

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

演示：Fiddle

jQuery - 当点击元素太快时，动画就会出错

1 个答案: