Question

I have this function that I would like to condense into some iterator. How could this function be cleaned up?

All need to act sequentially, as in: When one function returns, the next one begins. All odd children should fade out after fading in, and all even children should fade in and not fade out after.

Please note that this code is in CoffeeScript, so no semicolons.

I’m also having a problem with after the 8th child (e.g. if I continue on to ‘.title-sword:nth-child(9), etc) the function stops working. My thinking is there is a limit for embedded functions in depth but I am not able to verify this.

$('.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

Try something like this (no CoffeeScript, since I’m just a regular JS guy):

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

This code will run the desired function starting with the second child, and repeating until there are no more children.