0

我有这个函数，我想把它浓缩成一些迭代器。如何清理此功能？

都需要按顺序执行，如：当一个函数返回时，下一个函数开始。所有奇数子项都应在淡入后淡出，所有偶数子项应在淡入后不淡出。

请注意，这段代码在 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')
                    )
                )
            ) 
        )
    )
)
4

4 回答 4

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

此代码将从第二个孩子开始运行所需的功能，并重复直到没有更多孩子为止。

于 2012-06-17T21:44:14.817 回答
0

尝试这个：

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

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

于 2012-06-17T21:42:37.800 回答
0

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

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)') );

我不熟悉咖啡脚本的语法，但应该很容易修改

于 2012-06-17T21:45:20.403 回答
0

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

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);
于 2012-06-17T22:20:18.140 回答