39121


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

**main.js**

[code]

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

**index.html(一部)**

[code]

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


CC BY-SA 3.0
2017-10-29T08:56:20.310
39120
2017-10-29T10:22:56.727
7232
question
javascript html jquery
jQueryで要素を表示させた時に常に最下部にスクロールさせたい。


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

[Demo](https://jsfiddle.net/kmh1hwn6/)

[code]

    $(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);
      });
    });
    
[/code]


CC BY-SA 3.0
2017-10-29T10:22:56.727
39121
2017-10-29T10:22:56.727
20206
39120
answer