1

我正在创建一个实用方法，它有助于使用 jQuery 顺序淡化元素。正如您在下面的代码中看到的那样，我添加了一个额外的类作为alreadyFadedIn标志。在方法调用结束时，sequentiallyFadeIn(...)我想执行cleanUp我想删除我在sequentiallyFadeIn(...)方法内的选定元素中添加的标志类的位置。

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    function sequentialFadeIn(selectorText, speed, display, callBack) {

        display = typeof display !== 'undefined' ? display : "block";

        function helper() {
            nextElementToFadeIn = $(selectorText).not(".alreadyFadedIn").first();
            nextElementToFadeIn.fadeIn(speed, function() {
                $(this).addClass("alreadyFadedIn");
                helper();
            }).css("display", display);
        }
        helper();

        callBack(selectorText);      
    }
    sequentialFadeIn(".toBeFaddedIn", "slow", "inline-block",function cleanUp(selectorText1){
            $(selectorText1).removeClass("alreadyFadedIn");
            console.log("Clean up has been performed.");
                    console.log("Selector Text: " +selectorText1);

        } );

});

</script>

</head>
<body><style media="screen" type="text/css">
.hello {
    background-color: blue;
    height:50px;
    width: 50px;
    display: none;

}
</style>

<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>

</body></html>

在查看检查元素时，我注意到该类alreadyFadedIn没有被删除。在我看来，原因是 cleanUp 方法sequentiallyFadeIn与helper(). 您还可以注意到日志消息“已执行清理”。甚至在 div 完成淡入之前就被打印出来。

如何cleanUp在方法中的主要逻辑完成后执行调用sequentiallyFadedIn？有什么建议么？

jsfiddle 上的代码：http: //jsfiddle.net/BztLx/11/

4

3 回答 3

4

您需要检查是否有任何元素需要淡入。如果没有元素剩余，请调用清理回调。以下是我的实现方式：

    if ($(selectorText).is(":not(.alreadyFadedIn)")) {

        //Your main logic
        nextElementToFadeIn = $(selectorText).not(".alreadyFadedIn").first();
        nextElementToFadeIn.fadeIn(speed, function() {
            $(this).addClass("alreadyFadedIn");
            helper();
        }).css("display", display);

    } else {

        //No elements remain, cleanup time
        callBack(selectorText);
    }

在外部条件中，我检查是否至少有一个元素没有淡入，否则我调用回调。

演示：http: //jsfiddle.net/BztLx/12/

于 2012-11-24T17:25:27.937 回答
3

如果你只是像这样重写你的代码，更容易，更干净，更快......

$(document).ready(function() {

    function sequentialFadeIn(selectorText, speed, display, callBack) {

        display = display || "block";

        var els = $(selectorText),
              i = 0;

        (function helper() {
            els.eq(i++).fadeIn(speed, helper).css("display", display);
            if (callback && i === els.length)
                callback(selectorText); // Not really needed any more
        })();
    }

    sequentialFadeIn(".toBeFaddedIn", "slow", "inline-block", function cleanUp(selectorText1){
        // not really needed any more
       //  $(selectorText1).removeClass("alreadyFadedIn");
    });
});

演示：http: //jsfiddle.net/BztLx/15/

你做的DOM 选择比需要的多。

于 2012-11-24T17:52:48.227 回答
2

为了扩展我的评论，这是一个不使用附加类的简化版本：

function fadeThenNext(element){
    element.fadeIn("fast", function() {
        element=element.next(".toBeFaddedIn");
        if (element.length) fadeThenNext(element);
    });
}
fadeThenNext($(".toBeFaddedIn").first());

演示：http: //jsfiddle.net/BztLx/17/

[更新]如果元素不是同级元素，则使用更通用的版本：

function fadeSequence(elements){
    elements.first().fadeIn("fast", function() {
        fadeSequence(elements.slice(1));
    });
}
fadeSequence($(".toBeFaddedIn"));

小提琴：http: //jsfiddle.net/BztLx/22/

于 2012-11-24T18:11:15.977 回答