Question

我有一个看起来像这样的功能

function show_services_title(show_services){
    $('.service').fadeOut();
    $.each($('.service'), function(i) {
        $(this).delay(500*i).fadeIn();
    });
}

现在，当我点击一个链接时调用了这个函数，问题是当我点击链接时，函数开始显示每个div与类'service'，但当我再次点击链接和divs避风港时完成显示然后在屏幕上出现乱七八糟。

这是一个模拟我试图描述的行为的例子，我想避免。

http://jsfiddle.net/bw7jn/4/

Answer 1

尝试在上一个动画仍在运行时第二次禁用运行动画。

$(document).ready(function(){
    $('#link').click(function(){
        show_services_title();
    });
});

function show_services_title(show_services){

    //if we're already animating, don't start a new one
    if($('ul').attr('data-animating') != 'true'){

        //make sure other clicks dont trigger this animation
        $('ul').attr('data-animating', 'true');
        $('.service').fadeOut();
        $.each($('.service'), function(i, element) {
            setTimeout(function(){
                $(element).fadeIn();

                //check if this is the last element we're gonna animate
                if(i == $('.service').length-1){
                    //animation is done, allow new animations to start
                    $('ul').attr('data-animating', 'false');   
                }
            }, 500*i);
        });
    }
}

http://jsfiddle.net/bw7jn/7/

如何避免重复jquery中的每个循环？

1 个答案: