javascriptのsetIntervalを使った処理に関して質問です。

詳しい内容は以下のURL先に記載してあります。
http://www.geocities.jp/qntbd042/demo/demo.html

回答の条件
  • 1人3回まで
  • 13歳以上
  • 登録:2011/04/05 19:41:14
  • 終了:2011/04/06 10:29:21

ベストアンサー

id:Cherenkov No.2

Cherenkov回答回数1502ベストアンサー獲得回数4922011/04/06 06:28:06

ポイント50pt

書き直してみました。

ul全体を上に移動して、アニメーションが終わったら元の位置に戻して、先頭のliを後ろに移動して休憩。setTimeoutで再び実行。

個数や高さなど難しいことは考えずになるべく相対的に処理してjQueryにまかせるイメージがいいと思います。


demo: http://jsfiddle.net/Lzmj9/


<html>
<head>
<style type="text/css">
#wrap {
  margin: 20px auto;
  width: 260px;
  height: 240px;
  overflow: hidden;
  border: solid 1px #ccc;
}
#demo {
  position: relative;
  margin: 0;
  padding: 0;
  width: 260px;
  height: 240px;
}
#demo li {
  width: 260px;
  height: 60px;
  overflow: hidden;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<script>
$(function() {

function roll() {
  $('#demo').animate({
    top: '-60px'
  }, {
    duration: 700,
    easing: 'easeOutBounce',
    complete: function() {
      $(this).css('top',0).find('li:first').appendTo(this);
      setTimeout(function() { roll(); }, 1000);
    }
  });
}
roll();

});
</script>
</head>
<body>
<div id="wrap">
<ul id="demo">
<li style="background: #ccc;">テスト1</li>
<li>テスト2</li>
<li style="background: #ccc;">テスト3</li>
<li>テスト4</li>
<li style="background: #ccc;">テスト5</li>
<li>テスト6</li>
</ul>
</div>
</body>
</html>

参考

.animate() -- jQuery API

id:finnapple

ご回答ありがとうございます。

私が考えていたよりも、ソースも考え方もすっきりしていてわかり易いです。

ありがとうございました!

2011/04/06 10:28:38

その他の回答(1件)

id:y-kawaz No.1

y-kawaz回答回数1419ベストアンサー獲得回数2252011/04/05 20:29:30

ポイント35pt

animateの第4引数のcallbackを使って毎回のアニメーション終了後に初期位置調整をするとかでいいんじゃないでしょうか?

setInterval(function() {
  $("#demo li").animate({top:"-=60px"},700,"easeOutBounce",
    function(){
      if(parseInt(parseInt(this.style.top.replace(/px/,'')))<0){
        $(this).css({top:($("#demo li").length*60-60)+'px'});
      }
    }
  );
}, 2000);
id:finnapple

ご回答ありがとうございます。

if文でtopの位置が「-(マイナス)」になったら、計算で位置を調整するということですね。

参考になります。サンプルソースもありがとうございました!

2011/04/06 10:26:16
id:Cherenkov No.2

Cherenkov回答回数1502ベストアンサー獲得回数4922011/04/06 06:28:06ここでベストアンサー

ポイント50pt

書き直してみました。

ul全体を上に移動して、アニメーションが終わったら元の位置に戻して、先頭のliを後ろに移動して休憩。setTimeoutで再び実行。

個数や高さなど難しいことは考えずになるべく相対的に処理してjQueryにまかせるイメージがいいと思います。


demo: http://jsfiddle.net/Lzmj9/


<html>
<head>
<style type="text/css">
#wrap {
  margin: 20px auto;
  width: 260px;
  height: 240px;
  overflow: hidden;
  border: solid 1px #ccc;
}
#demo {
  position: relative;
  margin: 0;
  padding: 0;
  width: 260px;
  height: 240px;
}
#demo li {
  width: 260px;
  height: 60px;
  overflow: hidden;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<script>
$(function() {

function roll() {
  $('#demo').animate({
    top: '-60px'
  }, {
    duration: 700,
    easing: 'easeOutBounce',
    complete: function() {
      $(this).css('top',0).find('li:first').appendTo(this);
      setTimeout(function() { roll(); }, 1000);
    }
  });
}
roll();

});
</script>
</head>
<body>
<div id="wrap">
<ul id="demo">
<li style="background: #ccc;">テスト1</li>
<li>テスト2</li>
<li style="background: #ccc;">テスト3</li>
<li>テスト4</li>
<li style="background: #ccc;">テスト5</li>
<li>テスト6</li>
</ul>
</div>
</body>
</html>

参考

.animate() -- jQuery API

id:finnapple

ご回答ありがとうございます。

私が考えていたよりも、ソースも考え方もすっきりしていてわかり易いです。

ありがとうございました!

2011/04/06 10:28:38
  • id:Cherenkov
    処理が一瞬で終わるのでどっちでもいいかもしれませんが、こうしたほうが自然ですね…
    $(this).find('li:first').appendTo(this).end().end().css('top',0);

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません