Jquery图像循环问题

Question

我正在为一个家庭朋友开发一个网站。他们希望将所有同事的徽标放在一行中，然后巧妙地褪色以替换为第一次不适合的其他徽标。

为了实现这一点，我分配了<img> 的类，它们表示它们应该出现在哪个周期中，具体取决于在给定当前宽度的情况下，这些图像中有多少可以适合该行。这发生在我的 assignCycleNumbers 函数中。

然后，为了真正让它们淡入淡出，我有另一个名为cycleAssociates 的函数，它递归地淡入和淡出适当的类。理论上很好，但是它似乎不能正常工作，这特别奇怪，因为i tested the function here 并且工作正常。它们之间的唯一区别是现在我正在尝试动态分配循环编号。

我真的很难过，我可以帮上忙！

您可以看到website hosted here，如果您向下滚动到内容的底部，您会在底部看到徽标，其行为与预期不符。 （第一个周期看起来不错，但随后的周期变得混乱，如果你调整到更小的屏幕宽度，更容易观察到）。

您可以通过浏览器彻底检查代码，但这里有您需要知道的所有内容，再次感谢您提供任何见解。

编辑：The whole javascript file as requested. 但所有相关内容如下：

JS：

//single global variable to represent how many logo cycles there is
var totalCycles = 0;

...

$(window).load(function() {

    ...
   totalCycles = assignCycleNumbers();
   cycleAssociates();


});

// window is resized 
$(function(){
    $(window).resize(function() {
        ...
        totalCycles = assignCycleNumbers();
    });
});

...

function cycleAssociates(){
    var cycle = 0;

    var recursiveCycling = function(cycle, totalCycles){
        var currentAssociate = ".cycle" + cycle;
        //fade in all img with the current cyle class over a second,
        //wait 3 seconds before fading out over a second.
        $(currentAssociate).delay(100).fadeIn(1000).delay(3000).fadeOut(1000,
            function(){
                cycle++;
                if(cycle > totalCycles){
                    cycle = 0;
                }
                recursiveCycling(cycle, totalCycles);
            });

    };
    recursiveCycling(cycle, totalCycles);

}


function assignCycleNumbers(){
    //first remove any old cycle# classes (resized window case)
    $('[class*="cycle"]').removeClass( function(unusedIdx,c){
        return c.match(/cycle\d+/g).join(" ");
    });

    //measure div width
    var divSpace = $("#bodies").innerWidth();
    //assign a cycle number to a number of logos until no more will fit in that div
    var cycleNum = 0;
    $(".associate").each(function(){

        if( divSpace - $(this).width() > 0){
            $(this).addClass("cycle" + cycleNum);
            divSpace = divSpace - $(this).width();
        }
        else{ //next logo won't fit current cycle, create next cycle
            cycleNum++
            $(this).addClass("cycle" + cycleNum);
            divSpace = $("#bodies").innerWidth() - $(this).width();
        }
    });
    return cycleNum;
}

html：

                <img class="associate" src="IMG/spare.png" alt=""/>
                <img class="associate" src="IMG/bcs_professional.jpg" alt="BCS Professional Member"/>
                <img class="associate" src="IMG/climate_savers.jpg" alt="Climate Savers Smart Computing"/>
                <img class="associate" src="IMG/code_of_conduct.jpg" alt="Data Centres Code Of Conduct Endorser"/>
                <img class="associate" src="IMG/spare.gif" alt=""/>
                <img class="associate" src="IMG/enistic.gif" alt="Enistic"/>
                <img class="associate" src="IMG/greentrac_authorised.png" alt="Greentrac Authorised Reseller"/>
                <img class="associate" src="IMG/very_pc.jpg" alt="Very PC Approved"/>
                <img class="associate" src="IMG/spare.jpg" alt=""/>

css：

#bodies img.associate{
            float: left;
            max-width: 120px;
            max-height: 80px;
            display:none;
        }

Answer 1

问题是您的fadeOut 函数的回调甚至在当前循环中的所有元素都淡出之前正在执行。这是按预期工作的函数的修改版本：

function cycleAssociates(){
    var cycle = 0;
    var recursiveCycling = function(cycle, totalCycles){
        var currentAssociate = ".cycle" + cycle;
        var n = $(currentAssociate).length; //How many images in current cycle?
        $(currentAssociate).each(function() {
            $(this).delay(100).fadeIn(1000).delay(3000).fadeOut(1000, function() {
                n --;
                if(n <= 0) { //current cycle done?
                    cycle++;
                    if(cycle > totalCycles){
                        cycle = 0;
                    }
                    recursiveCycling(cycle, totalCycles);
                }
            });    
        });    
    };
    recursiveCycling(cycle, totalCycles);
}

要解决窗口调整大小时出现的问题，请尝试将您当前的 $(window).resize 处理程序替换为：

$(function(){
    $(window).resize(function() {
        parallelNavbar();
        $(".associate").stop(); //if there are any animations, stop 'em
        $(".associate").hide(); //hide all associates
        totalCycles = assignCycleNumbers(); //update the assignment
        cycleAssociates(); //let's get cyclin' again!
    });
});

虽然我认为您在滚动方面存在一些问题。不过，这应该可以解决主要的循环问题——所以我希望能有所帮助！