4

私は家族の友人のためにウェブサイトに取り組んでいます。その上で、彼らはすべてのアソシエイトのロゴを一列に並べたいと考えていましたが、それは微妙にフェードアウトして、最初は収まらなかった追加のロゴに置き換えられました.

これを実現するため<img>に、現在の幅が与えられた行に収まる画像の数に応じて、どのサイクルに表示されるかを表す のクラスを割り当てました。これは私のassignCycleNumbers機能で起こります。

cycleAssociates次に、実際にそれらをフェードインおよびフェードアウトするために、適切なクラスを再帰的にフェードインおよびフェードアウトする別の関数が呼び出されます。理論上は問題ありませんが、正しく動作していないようです。ここで機能をテストしたところ、正常に動作したため、特に奇妙です。それらの唯一の違いは、サイクル番号を動的に割り当てようとしていることです。

私は本当に困惑しており、助けが必要です！

ここでホストされている Web サイトを確認できます。コンテンツの一番下までスクロールすると、下部にロゴが表示され、期待どおりに動作していません。(最初のサイクルは問題ないように見えますが、その後のサイクルは混乱し、画面幅を小さくすると見やすくなります)。

ブラウザからコードを徹底的に調べることができますが、知っておくべきことはすべてここにあります。

編集:要求された JavaScript ファイル全体。しかし、関連するすべてのものは以下のとおりです。

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;
        }
4

1 に答える 1

2

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

スクロールに問題があると思いますが。ただし、これでサイクリングの主な問題は解決するはずです。

于 2012-08-27T11:35:09.677 に答える