1

この関数の動作方法：

1）ユーザーがID「surf」のボタンをクリックすると、アニメーションが始まります

2）この関数は、クラス「threadboard」のdivの最初のインスタンスを見つけ、そこで1.5秒間一時停止してから、クラス「threadboard」のdivの次のインスタンスまでスムーズにスクロールダウンし、そこで1.5秒間一時停止してから、スムーズにスクロールします。次など

3）関数は、クラス「threadboard」を持つdivのすべてのインスタンスを介してこれを実行し、終了する必要があります

私はjQueryをメソッド、、で使用しようとしていますscrollTop()が、each()これまでのところ、さまざまな成功を収めています。これが私がこれまでに持っているものです（編集：動作しているが不完全なコードを含めるため）：animate()setTimeout()

var currentIndex = 0;
var numDivs = 18;

$(window).load(function() {
    $('#surf').click(
        function(){start();}
    );
});

function start() {
//if (numDivs > 0) {
    var winY = window.screenY;
            $("body").animate({ scrollTop: 225 * currentIndex}, 1100);
    //
    currentIndex = (currentIndex + 1) % numDivs;
    setTimeout(start, 3000);
//}
}

今のところ、各インスタンスが特定のピクセル数離れており、インスタンス数がハードコーディングされていると推定して、海賊盤方式を使用していることに気付きました。これは理想的ではありません。この関数を書くための最良の方法は何ですか？コードはhttp://cornellhub.com/board/で実装されます

4

1 に答える 1

1

これが私のショットです：

http://jsfiddle.net/3aBx9/

基本的に、存在するすべての の最上位をチェックし、.threadboardそれぞれを繰り返し処理し、タイマーに値を追加して実行します。

キャンセル ボタンの作成は、 のように簡単にする必要がありますclearTimeout()。

元の投稿者による最終編集。コードはすべてのブラウザで動作するように修正されています。最終的な解決策は、どちらかbody, htmlの代わりにまたは を使用することでした。前者は Webkit ブラウザーで動作し、後者は非 Webkit ブラウザーで動作します。関数とタイムアウトも、 の範囲外に移動する必要がありました。以下のコードは、編集されたソリューションを反映しています。bodyhtml$(document).ready(function () {

var timeOut = 1500;

function startSurf(winY) {
//new timeout function
setTimeout(function () {
    //the page neesd to be animated (relative of course, careful)
    $('body').animate({

        //animate the scroll
        scrollTop: winY

        //scroll speed
    }, 'fast');

    //our timer needs to be declared outside the functin so it doesn't just jump to the end.
}, timeOut);

//add 1.5 seconds for each iteration loop or it will try to jump to the end.
timeOut += 1500;
}
$(document).ready(function () {
$('#surf').click(function () {
    var numThreads = $('.threadboard');

    $.each(numThreads, function (index, obj) {
        //the position of the object
        var position = $(obj).position();

        //the top position of the object (relative of course, careful)
        var winY = position.top;

        //on the first iteration
        if (index == 0) {
            $('body').animate({
                scrollTop: winY
            }, 'fast');

            //for every iteration after
        } else {
            startSurf(winY);
        }
    });
});
});
于 2012-05-22T02:03:10.223 に答える