1

私はこのアイテムのリストを持っています

<div id="lessonThree">
<a class="next" href="#">Next</a>

 <ul class="sponsors">
    <li>Chicago Community Trust</li>
    <li>Chicago Instructional Technology Foundation</li>
    <li>City of Chicago</li>
    <li>Corporation for Public Broadcasting</li>
    <li>U.S. Department of Energy</li>
    <li>Ford Foundation</li>
    <li>Google</li>
    <li>Intel</li>
    <li>Knight Foundation</li>
    <li>MacArthur Foundation</li>
    <li>National Endowment for the Arts</li>
    <li>NESTA</li>
    <li>The Nominet Trust</li>
    <li>National Science Foundation</li>
    <li>Ontario Trillium Foundation</li>
    <li>Social Science Research Council</li>
    <li>Alfred P. Sloan Foundation</li>
    <li>Telefonica</li>
    <li>ZeroDivide</li>
  </ul>    
</div>

ここで達成しようとしているのは、一度に表示するアイテム数の制限を設定したいということです。

var MAX_ITEM = someNumbers // this will be define in the javascript file

したがって、その時点で表示する最大アイテムがあるとすれば、3私が本当に望んでいるのは、 fadeInjQueryを1つずつ使用できるようにすることであり、MAX_ITEMに達したときに、1500setTimeOutまたは同様のものを使用してミリ秒の遅延が必要です少しの間、3 つの項目が表示されfadeOut、次の 3 つの項目が開始され、無限ループとして続きます。

ボタンは、nextあたかも次のアイテムをより速く動かしたいかのように、次のアイテムに速く移動するために使用されます。

以前はこのプラグインを使用していましCarofredSelたが、実際には Web アプリケーションのページ読み込みに多くの影響を与え、スタイルには多くの制限があり、実際には制御できませんでした。

これを達成できるように、誰かが私に方法や例を提案できますか?

これは私が始めたコードです

$('ul > li').each(function(i, element) {
    $(element).delay(i * 2000).fadeIn();
});

しかし、上記のコードは各リスト項目をループするだけで、最後に停止します。

アップデート：

「Stackoverflowについて」もう少し調査しました。良い例がたくさんあり、これは私が望むものに最も近いものですが、私が望むものを正確に達成することはできません.

var counter = 0;
var limit = 3;

function fadeInSequence(li){
    var next = $(li).next('li')!=null?function(){fadeInSequence($(li).next('li'));}:function(){};
    $(li).fadeIn(2000,next);
    counter++;
    if(counter == limit){

        counter = 0;
    }

}
fadeInSequence($('.sponsors>li:first'));

http://jsfiddle.net/zdqCz/84/

上記のコードはfadeIn、リスト内のすべてのアイテムを処理しますが、無限ではありません。ここで必要なのは、3 つのアイテムのみfadeOutを表示し、次の 3 つを表示する上記と同じです。

4

1 に答える 1

2

したがって、あなたの更新は良いスタートでした... 1 つではなく 3 つの項目 (jquery セレクター) を含めるように調整し、fadeIn のコールバックにフェードアウトを追加して、探していたサイクルを実現しました。コールバックがリストの最後に到達したら、最初からやり直します。下記参照

function fadeInSequence($three) {
    //default to the first three list items
    if ($three == null) $three = $('.sponsors>li:lt(3)');

    //fade in the 3 found
    $three.fadeIn(2000, function () {
        //fade out the 3 after fadein and start
        $(this).fadeOut(2000);
    }).promise().done(function () {
        if ($three.last().nextAll(':lt(3)').length) {
            //Same function, next 3 items
            fadeInSequence($three.last().nextAll(':lt(3)'));
        } else {
            //Same function, from the beginning if none are left
            fadeInSequence();
        }
    });
}

$(function () {
    //start the infinite looping
    fadeInSequence();
});

http://jsfiddle.net/Q3DTC/4/

3 つの項目のそれぞれのフェードイン: http://jsfiddle.net/Q3DTC/6/

于 2013-07-14T22:32:33.290 に答える