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

虽然我认为滚动有一些问题。这应该可以解决主要的骑车问题 - 所以我希望这有帮助！

Jquery图像循环问题

1 个答案: