1

jQueryを使って、リスト要素を順番に表示するような以下のコードを書きました。しかしこれだと、要素が画面外まで表示されたときに見切れてしまいます。なので、表示された時と同時に、一番下にスクロールするようにしたいのですがどのようなコードを書けば良いのでしょうか。ご教授願います。

main.js

$(function(){

  $('#fadein-area ul li').hide();

  $('#fadein-area ul li').each(function(i) {
    $(this).delay(1000 * i).fadeIn(1000);
  });

});

index.html(一部)

  <div id="fadein-area">
    <ul>
      <li>
      </li>
      <li>
      </li>
      ...
    </ul>
  </div>

1 件の回答 1

0

なかなかめんどくさいですが、.queue()とか.animateを使うとできます。

Demo

$(function(){
  $('#fadein-area ul li').hide();

  $('#fadein-area ul li').each(function(i, e) {
    $(e).delay(1000 * i)
      .queue(function () {
        $(e).css({
          opacity: 0,
          display: "list-item"
        }).dequeue();
      })
      .queue(function () {
        var top = $(e).offset().top
        console.log(top);
        $("html, body").animate({
          scrollTop: top
        }, 300);
        $(e).dequeue();
      })
      .animate({
        opacity: 1
      }, 1000);
  });
});

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。