Question

我有这个函数，我想凝聚成一些迭代器。如何清理这个功能？

所有都需要按顺序执行，如下所示：当一个函数返回时，下一个函数开始。所有奇怪的孩子都应该在淡入后逐渐消失，所有的孩子都应该淡入淡出而不会淡出。

请注意，此代码使用CoffeeScript，因此不能使用分号。

我在第8个孩子之后也遇到了问题（例如，如果我继续'.title-sword：nth-child（9）等），该功能将停止工作。我的想法是深入嵌入函数是有限制的，但我无法验证这一点。

$('.title-sword:nth-child(2)').css('visibility', 'visible').hide().fadeIn('fast').fadeOut('fast', ->
    $('.title-sword:nth-child(3)').css('visibility', 'visible').hide().fadeIn('fast', ->
        $('.title-sword:nth-child(4)').css('visibility', 'visible').hide().fadeIn('fast').fadeOut('fast', ->
            $('.title-sword:nth-child(5)').css('visibility', 'visible').hide().fadeIn('fast', ->
                $('.title-sword:nth-child(6)').css('visibility', 'visible').hide().fadeIn('fast').fadeOut('fast', ->
                    $('.title-sword:nth-child(7)').css('visibility', 'visible').hide().fadeIn('fast', ->
                        $('.title-sword:nth-child(8)').css('visibility', 'visible').hide().fadeIn('fast').fadeOut('fast')
                    )
                )
            ) 
        )
    )
)

Answer 1

尝试这样的事情（没有CoffeeScript，因为我只是一个普通的JS人）：

(function() {
    var i=2, elm,
        step = function() {
            elm = $('.title-sword:nth-child('+i+')');
            if( !elm) return;
            elm.css('visibility','visible').hide();
            if( i%2 == 0) elm.fadeIn('fast').fadeOut('fast',step);
            else elm.fadeIn('fast',step);
            i++;
        };
    step();
})();

此代码将从第二个子项开始运行所需的函数，并重复直到没有更多的子项。

Answer 2

试试这个：

$('.title-sword:nth-child(n+2):not(:nth-child(n+9))').css('visibility', 'visible').hide().fadeIn('fast').fadeOut('fast')

http://jsfiddle.net/RfHj2/1/

Answer 3

假设元素都是兄弟姐妹，这应该有效：

function doFades($el){
    $el.css('visibility', 'visible').hide().fadeIn('fast').fadeOut('fast', function(){
            var $next=$(this).next();
            if($next.length){
                doFades( $next);
            }
    }); 
}

doFades( $('.title-sword:nth-child(2)') );

我不熟悉coffeescript语法，但应该很容易修改

Answer 4

我更喜欢只运行一次选择器操作，然后迭代结果。这是一个可用于您的目的的通用函数：

fadeInOutChildren(parentSelector, lowChild, highChild) {
    var items = $(parentSelector).children();
    var index = lowChild;

    function next() {
        if (index <= highChild) {
            items.eq(index++).css('visibility', 'visible').hide().fadeIn('fast').fadeOut('fast', next);
        }
    }
    next();
}

fadeInOutChildren(".title-sword", 1, 7);

如何清理这个jQuery函数？

4 个答案: