Question

我写了一个效果，用模式淡入淡出背景。

JS代码很笨拙（JSFiddle中的完整代码）：

var fade_speed = 400;
function moveIn() {
    $('#column1_1').fadeIn(fade_speed, function () {
        $('#column1_2').fadeIn(fade_speed);
        $('#column2_1').fadeIn(fade_speed, function () {
            $('#column1_3').delay(fade_speed).fadeIn(fade_speed);
            $('#column3_1').delay(fade_speed).fadeIn(fade_speed);
            $('#column2_2').delay(fade_speed).fadeIn(fade_speed, function () {
                $('#column1_4').delay(fade_speed).fadeIn(fade_speed);
                $('#column2_3').delay(fade_speed).fadeIn(fade_speed);
                $('#column3_2').delay(fade_speed).fadeIn(fade_speed);
                $('#column4_1').delay(fade_speed).fadeIn(fade_speed, function () {
                    $('#column1_5').delay(fade_speed).fadeIn(fade_speed);
                    $('#column2_4').delay(fade_speed).fadeIn(fade_speed);
                    $('#column3_3').delay(fade_speed).fadeIn(fade_speed);
                    $('#column4_2').delay(fade_speed).fadeIn(fade_speed, function () {
                        $('#column1_6').delay(fade_speed).fadeIn(fade_speed);
                        $('#column2_5').delay(fade_speed).fadeIn(fade_speed);
                        $('#column3_4').delay(fade_speed).fadeIn(fade_speed);
                        $('#column4_3').delay(fade_speed).fadeIn(fade_speed, function () {
                            $('#column2_6').delay(fade_speed).fadeIn(fade_speed);
                            $('#column3_5').delay(fade_speed).fadeIn(fade_speed);
                            $('#column4_4').delay(fade_speed).fadeIn(fade_speed, function () {
                                $('#column3_6').delay(fade_speed).fadeIn(fade_speed);
                                $('#column4_5').delay(fade_speed).fadeIn(fade_speed, function () {
                                    $('#column4_6').delay(fade_speed).fadeIn(fade_speed, function () {
                                        // Ending
                                        moveOut();
                                    });
                                });
                            });
                        });
                    });
                });
            });
        });
    });
}

function moveOut() {
    $('#column4_6').delay(fade_speed).fadeOut(fade_speed, function () {
        $('#column3_6').delay(fade_speed).fadeOut(fade_speed);
        $('#column4_5').delay(fade_speed).fadeOut(fade_speed, function () {
            $('#column2_6').delay(fade_speed).fadeOut(fade_speed);
            $('#column3_5').delay(fade_speed).fadeOut(fade_speed);
            $('#column4_4').delay(fade_speed).fadeOut(fade_speed, function () {
                $('#column1_6').delay(fade_speed).fadeOut(fade_speed);
                $('#column2_5').delay(fade_speed).fadeOut(fade_speed);
                $('#column3_4').delay(fade_speed).fadeOut(fade_speed);
                $('#column4_3').delay(fade_speed).fadeOut(fade_speed, function () {
                    $('#column1_5').delay(fade_speed).fadeOut(fade_speed);
                    $('#column2_4').delay(fade_speed).fadeOut(fade_speed);
                    $('#column3_3').delay(fade_speed).fadeOut(fade_speed);
                    $('#column4_2').delay(fade_speed).fadeOut(fade_speed, function () {
                        $('#column1_4').delay(fade_speed).fadeOut(fade_speed);
                        $('#column2_3').delay(fade_speed).fadeOut(fade_speed);
                        $('#column3_2').delay(fade_speed).fadeOut(fade_speed);
                        $('#column4_1').delay(fade_speed).fadeOut(fade_speed, function () {
                            $('#column1_3').delay(fade_speed).fadeOut(fade_speed);
                            $('#column2_2').delay(fade_speed).fadeOut(fade_speed);
                            $('#column3_1').delay(fade_speed).fadeOut(fade_speed, function () {
                                $('#column1_2').delay(fade_speed).fadeOut(fade_speed);
                                $('#column2_1').delay(fade_speed).fadeOut(fade_speed, function () {
                                    $('#column1_1').delay(fade_speed).fadeOut(fade_speed, function () {
                                        // Ending

                                    });
                                });
                            });
                        });
                    });
                });
            });
        });
    });
}

$(document).ready(function() {
    moveIn();
});

是否可以简化它，并传递行数和数量。列作为参数？另外，我怎么能暂停＆amp;恢复效果？

请参阅JSFiddle了解相关操作。

Answer 1

我认为简化这种方法的最佳方法是按行遍历每个图块以创建斜波：

var fade_speed = 400,
    col = 6,//tiles on a single row
    row = $('.row').length, //4
    tiles = $('.row div');

function moveIn() {
    // loop through each tile
    for (var i = 0; i < col + row; i++) {
        var j = i;
        // loop through all the rows
        for (var k = 0; k < row; k++) {
            //stop the loop if the tile is not on the current row
            if (j < k * col) break;
            //set a delay on the tile base on its index
            tiles.eq(j).delay(i * fade_speed * 2).fadeIn(
                fade_speed,
                function () {
                //clearqueue to prevent further animation on the tile
                    $(this).clearQueue();
                    //if the last tile has fadeIn execute moveOut()
                    if (tiles.last().is(':visible')) {
                        moveOut();
                    }
            });
            //increment the counter to move on the tile left to bottom
            j += col - 1;
        }
    }
}

function moveOut() {
    //again loop through each tile
    for (var i = 0; i < col + row; i++) {
        var j = (col * row) - i;
        // Loop through all the rows but this time we are decrementing
        for (var k = row - 1; k >= 0; k--) {
            //stop the loop if the tile is not on the current row
            if (j > (k + 1) * col - 1) break;
            //set a delay on the tile base on its index then fadeOut
            tiles.eq(j).delay(i * fade_speed * 2).fadeOut(fade_speed);
            //decrement the counter to move on the tile right to top
            j -= col - 1;
        }
    }
}

$(document).ready(function () {
    moveIn();
});

请参阅jsfiddle：http://jsfiddle.net/42H48/2/

简化＆amp;使这个JS效果可扩展

1 个答案: