1

我一直在研究这个 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;
});
4

1 回答 1

4

在开始一个新动画之前使用.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;
});

演示:小提琴

于 2013-08-16T17:09:17.740 回答