2

詩を単語ごとに表示しています（lettering.jsとjQueryを使用しています。これはうまく機能しています。次に機能を追加します：テキストが画面に表示されたときにページを下にスクロールします。試しています：

div.lettering('words');
div.find('span').hide();
div.show().find('span').each(function(i) {
    $(this).delay(delay * i).fadeIn(fadeIn);
    var _this = $(this);
    $('html, body').scrollTop(
        _this.offset().top - $('html, body').offset().top + $('html, body').scrollTop()
    );
});

また試した：

div.lettering('words');
div.find('span').hide();
div.show().find('span').each(function(i) {
    $(this).delay(delay * i).fadeIn(fadeIn);
    var _this = $(this);
    $('html, body').animate({
        scrollTop: _this.offset().top
    }; 500);
});

しかし、ページはページの読み込み時にある位置までスクロールします。それだけです。私が使用している_this変数が正しくないように感じます。

私の目標を達成する方法はありますか？

4

2 に答える 2

5

コンテンツをボディに直接追加していて、要素が追加されるとボディの高さが動的に変更される場合は、これを行う必要があります。

div.show().find('span').each(function(i) {
    $(this).delay(delay * i).fadeIn(fadeIn,function(){
    var _body = $("body");
      _body.animate({
         scrollTop: document.body.scrollHeight;
      }; 500);
    });
});

あなたの場合、下にスクロールするためのアニメーションがすぐに発生しましたが、これは必要ありませんでした。このようにすると、フェードインアニメーションが完了したときにのみスライドダウンアニメーションが発生します。

それ以外の場合は、ボディにコンテンツを直接追加しない場合でも、アウターとインナーに適用される同じテクニックを使用して追加できます。

于 2012-12-20T04:24:58.697 に答える
0

@Abhishekが彼の回答で指摘したように、スクロールが正しく機能するためにはコールバックを使用する必要がありました。ただし、スクロールはまだ機能していませんでした。そのため、 scrollToプラグインと組み合わせてAbhishekのコードを使用することになりました。

div.lettering('words');
div.find('span').hide();
$.scrollTo('h3', {duration:500});
div.show().find('span').each(function(i) {
    var _this = $(this);
    $(this).delay(delay * i).fadeIn(fadeIn,function(){
        $.scrollTo(_this, {duration:100} );
    });
});

アニメーションは少し速すぎるため、思ったほどスムーズではありませんduration: 100。ただし、値を大きくすると、すべてのテキストが表示された後にスクロールが発生し、少し奇妙に感じます。

于 2012-12-20T08:15:38.730 に答える