Question

这是我在我的项目中编写和当前使用的功能但是我想确定是否有更好的方法来编写它：

function pageLoader(pageIndex) {

    $(".ServicesSectionWrapper,.ServicesSectionWrapper .Selector,.ServicesSection,.JournalSectionWrapper,.JournalSectionWrapper .Selector,.JournalSection,.AboutSectionWrapper,.AboutSectionWrapper .Selector,.AboutSection").hide();

    switch (pageIndex) {

    case 1:
        $(".AboutSectionWrapper").fadeIn(400, function () {
            $("#AboutWrapper").fadeIn(400, function () {
                $("#ManagerWrapper").fadeIn(400, function () {
                    $("#DeveloperWrapper").fadeIn(400, function () {
                        $("#DesignerWrapper").fadeIn(400, function () {
                            $(".AboutSection").fadeIn(400, function () {
                                $(".AboutSection").addClass("PreLoadRotate")
                            })
                        })
                    })
                })
            })
        });
        break;

    case 2:
        $(".JournalSectionWrapper").fadeIn(400, function () {
            $("#DateOne").fadeIn(400, function () {
                $("#DateTwo").fadeIn(400, function () {
                    $("#DateThree").fadeIn(400, function () {
                        $("#DateFour").fadeIn(400, function () {
                            $("#DateFive").fadeIn(400, function () {
                                $("#DateSix").fadeIn(400, function () {
                                    $("#DateSeven").fadeIn(400, function () {
                                        $("#DateEight").fadeIn(400, function () {
                                            $(".JournalSection").fadeIn(400, function () {
                                                $(".JournalSection").addClass("PreLoadRotate")
                                            })
                                        })
                                    })
                                })
                            })
                        })
                    })
                })
            })
        });
        break;

    case 3:
        $(".ServicesSectionWrapper").fadeIn(400, function () {
            $("#AppsWrapper").fadeIn(400, function () {
                $("#ResponsiveWrapper").fadeIn(400, function () {
                    $("#DigitalWrapper").fadeIn(400, function () {
                        $("#PTRWrapper").fadeIn(400, function () {
                            $(".ServicesSection").fadeIn(400, function () {
                                $(".ServicesSection").addClass("PreLoadRotate")
                            })
                        })
                    })
                })
            })
        });
        break;

    }
}

这是HTML：

    <div class="AboutSectionWrapper">

        <div class="Selector" id="AboutWrapper"></div>
        <div class="Selector" id="DesignerWrapper"></div>
        <div class="Selector" id="ManagerWrapper"></div>
        <div class="Selector" id="DeveloperWrapper"></div>

    <div class="AboutSection">
        <div class="Indicator"></div>
        </div>

      </div>

这是一个菜单（AboutSectionWrapper），它有你可以看到的选择器，我想首先加载菜单，然后顺序加载选择器，最后淡入菜单指示器并添加一个具有Transition的CSS类。

其他案例也是如此，例如在案例2中有更多选择器！

请指教，谢谢。

Answer 1

我正在做一些假设...但是......

代码的逻辑似乎是淡化一个元素，然后淡化一个孩子（或兄弟姐妹？）虽然因为初始选择器是一个类，但后续的id是我不确定的

我会使用类标识符而不是ID。并将它与child或nextSibling结合起来调用递归函数中的淡入淡出。

所以（在这里键入，未经测试）类似......

case n:
    fadein(<rootselector>)
case m:

...

function fadein(selector)  {
    $(selector).fadeIn(400, function () {
        if ($(selector).nextSibling(<classselector>)) {
            fadein($selector.nextSibling(<classselector>);
}   }   }

Answer 2

简而言之，我会做类似的事情：

$('.date').each(function(i){
    $(this).fadeIn(400*i);
});

你知道我要去哪儿吗？

Answer 3

这可以通过很多方式完成。这是一个1：am的解决方案，很简单，可以改进和改进，但你会得到这个想法！

// Construct an object structure with your chains instead
var elementAnimation = [{
    "element": ".AboutSectionWrapper",
    "effect": "fadeIn",
    "duration": 400
},{
    "element": "#AboutWrapper",
    "effect": "fadeIn",
    "duration": 400
},{
    "element": ".AboutSection",
    "effect": "addClass",
    "className": "PreLoadRotate"
}]

// Simple but effective callback handler
function MyCallback(index){

    if(elementAnimation.length <= index) return;
    var obj = elementAnimation[index];
    index++;

    if(obj.effect == "fadeIn") {
        $(obj.element).fadeIn(400, MyCallback(index))
    }

    if(obj.effect == "addClass") {
        $(obj.element).addClass(obj.className);
        MyCallback(index); // If necessary
    }
}

// Start
MyCallback(0);

你可以在json中实现更多的intel，非常简单呵呵：）

Answer 4

这可能就是我要做的事情：

function runFades(selectors, i) {
    i = i || 0;
    $(selectors[i]).fadeIn(400, function() {
        if (i < selectors.length) {
            runFades(selectors, i+1);
        }
        else {
            $(selectors[i-1]).addClass("PreLoadRotate");
        }
    });
}

然后在case语句中运行它：

switch (pageIndex) {
    case 1:
        runFades(['.AboutSectionWrapper', '#AboutWrapper', ... ]);
        break;
    ...
}

编写jQuery函数的更好方法

4 个答案: