人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

javascriptのsetIntervalを使った処理に関して質問です。
詳しい内容は以下のURL先に記載してあります。
http://www.geocities.jp/qntbd042/demo/demo.html

●質問者: 雨の日
●カテゴリ:インターネット ウェブ制作
✍キーワード:JavaScript URL 処理
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● y-kawaz
●35ポイント

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);
◎質問者からの返答

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

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

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


2 ● Cherenkov
●50ポイント ベストアンサー

書き直してみました。

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

◎質問者からの返答

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ