Railsで作成したアプリにてjQueryでの画像スライドが一回で止まってしまいます。

Question

railsで作成している画像投稿アプリにて、jQueryを使用して、画像が縦にスライドされ続ける

ようにコードを書きたいのですが、画像スライドが一回で止まってしまいます。

本日朝から完全にハマってしまっていまして抜け出せません。

初歩的な質問で大変恐縮ですがどなたかご教示頂けますと幸いです。

.main-wrapper__ranking-result
  .main-wrapper__ranking-result__trophy{id: 'trophy'}
    %i.fa.fa-trophy
    コメント総数TOP3
    %i.fa.fa-trophy
  .main-wrapper__ranking-result__carousel-box{id: 'carousel'}
    .main-wrapper__ranking-result__carousel-box__inner{id: 'inner'}
      - @ranking.each.with_index do |picture, i|
        .main-wrapper__ranking-result__carousel-box__inner__line{id: 'line'}
          = "#{i+1}位"
          = link_to picture_path(picture.id) do
            = image_tag picture.image.url, class: 'owl-lazy'

  &__ranking-result {
    position: fixed;
    text-align: center;
    color: gold;
    font-weight: bold;
    top: 110px;
    right: 30px;
    width: 180px;
    &__trophy {
      height: 25px;
      width: 100%;
    }
    &__carousel-box {
      height: 550px;
      overflow: hidden;
      position: relative;
      &__inner {
        position: relative;
        &__line {
          background-color: #eaf4ff;
          height: 170px;
          width: 150px;
          margin-right: auto;
          margin-left: auto;
          border-radius: 4px;
          margin-bottom: 15px;
          .owl-lazy {
            display: block;
            height: auto;
            width: auto;
            max-height: 140px;
            max-width: 150px;
            margin: auto;
            border-radius: 4px;
          }
        }
      }
    }
  }

$(document).on('turbolinks:load',function(){
  var slideHeight = $('#line').outerHeight();
  var slideNum = $('.owl-lazy').length;
  var slideSetHeight = slideHeight * slideNum;
  $('#inner').css('height', slideSetHeight);

    setInterval(function(){
      $('#inner').animate({
        bottom: 183.34
      })
    }, 2000)
});

上記、一番上のhamlのコードの最下段の画像が10個縦に並んでいて、下記のscssにて、
&__carouse-boxのところでoverflow: hidden;を設定し、画像が3つのみ
表示されるようにしています。

jQueryでsetIntervalを設定しているのですが、動くのは最初の一回のみで、
２回目以降はスライドがされません。

turbolinks:loadの記述を外し、functionからコードが始まるようになど、
したのですが変わらずです。

どなたか、ご教示のほど、よろしくお願い申し上げます。

Answer 1

質問のコードでは#innerのbottom: 183.34が
1回変わるだけなので画像スライドが1回で止まるのは
当然の結果です。

setInterval(function(){
  $('#inner').animate({
    bottom: 183.34
  })
}, 2000)

Comments

[kpg]

yasutomi　様
ご回答誠にありがとうございます！
setIntervalで、
$('#inner').animate({
bottom: 183.34
})
このアニメーションが繰り返されると
思っていたのですが、そもそもアニメーションの中身のコードを書き直す必要があるのでしょうか？