Q&A
ご回答ありがとうございます。
こちらで書いていただいた通りにしましたら、ほとんどのブラウザで問題なく動きました！
再帰を抜けるためにif文が必要なんですね。
console.logあたりがよくわからず、悩んでました。
ともあれ、ありがとうございました。
jQueryにて、animate関数を使ったループするアニメーションを作成中です。
それぞれの要素が独自の動きをして、それがひたすらループするというものです。
これらをずっとループさせるのではなく、2回だけループとか3回だけとか、指定の回数だけループさせる方法はないでしょうか？
下記が作成中のコードです。
ご教示いただけましたら幸いです。
setInterval(function(){
var $active = $("#slide ul li.active");
var $next = $active.next("li").length?$active.next("li"):$("#slide ul li:first");
$active.fadeOut($fade_speed).removeClass("active");
$next.fadeIn($fade_speed).addClass("active");
},$interval);
});
$(function () {
setTimeout("animation()",500); //アニメーションが実行されるまでの時間
});
function animation(){
sampletext();
sampleimage();
box();
}
function sampletext() {
$('.sampletext').animate({
left: '350px',opacity:0
}, 0).animate({
left: '110px',opacity:1
}, 1000);
setTimeout('sampletext()', 10000); //アニメーションを繰り返す間隔
}
function sampleimage() {
$(".box2").animate({
top: "250px" //要素を動かす位置
}, 0).animate({
top: "40px" //要素を戻す位置
}, 400)
setTimeout("sampleimage()", 10000);//アニメーションを繰り返す間隔
}
function box() {
$('.box1').animate({
left:"140px",
opacity:".1"
},1110).animate({
left:"140px",
opacity:"1"
}, 2100);
setTimeout('box()', 12000); //アニメーションを繰り返す間隔
}
</script>
回答3件
0
すいません中身を全部見てないのですが、複数回で終了するのはこんな漢字でいたかがでしょうか。
javascript
1var count = 0; 2setInterval(function(){ 3 console.log('hi!') 4 count++; 5 if (count > 3) clearInterval(this); 6},1000)
投稿2015/09/02 10:30
総合スコア1869
0
ベストアンサー
質問文のコードに手を加えた物
(正しく動作することを保証しませんが考え方が伝わればと)
<!doctype html> <html> <head> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function(){ // 設定 var $width =340; // 横幅 var $height =300; // 高さ var $interval = 5300; // 切り替わりの間隔（ミリ秒） var $fade_speed = 1000; // フェード処理の早さ（ミリ秒） $("#slide ul li").css({"position":"relative","overflow":"hidden","width":$width,"height":$height}); $("#slide ul li").hide().css({"position":"absolute","top":0,"left":0}); $("#slide ul li:first").addClass("active").show(); setInterval(function(){ var $active = $("#slide ul li.active"); var $next = $active.next("li").length?$active.next("li"):$("#slide ul li:first"); $active.fadeOut($fade_speed).removeClass("active"); $next.fadeIn($fade_speed).addClass("active"); },$interval); }); (function ($){ var count=5;//実行回数 $(function () { setTimeout(init,500); }); function init(){ box(); animationWrap(); } function animationWrap(){ if(!count){//カウントが0ならば再帰を抜ける return; } sampletext(); sampleimage(); setTimeout(animationWrap,10000); count--;//カウント回数の減少 } function sampletext() { $('.sampletext').animate({ left: '350px',opacity:0 }, 0).animate({ left: '110px',opacity:1 }, 1000); } function sampleimage() { $(".box2").animate({ top: "250px" //要素を動かす位置 }, 0).animate({ top: "40px" //要素を戻す位置 }, 400) } function box() { if(!count){//カウントが0ならば再帰を抜ける return; } $('.box1').animate({ left:"140px", opacity:".1" },1110).animate({ left:"140px", opacity:"1" }, 2100); setTimeout(box, 12000); } }(jQuery)); </script> <style> #wrap { position: relative; width: 300px; height: 250px; margin: 0px auto; } .sampletext { font-size: 12px; position: absolute; width: 100px; height:14px; top:50px; left:160px; float:left; } .box2 { color: white; text-align: center; width: 140px; position: absolute; height: 26px; background:#D9292C; font-size:10px; display:block; } #slide { width:340px; height:300px; margin:0 auto; position:relative; } .box1 { width: 100px; height:100px; position: absolute; top:40px; left:30px; text-align: center; } </style> <title>サンプル</title> </head> <body> <div id="wrap"> <div class="box1"> サンプルボックス1 </div> <div id="slide"> <ul> <li class="sampletext">ここはテキストが</li> <li class="sampletext">切り替わる</li> </ul> </div> <span class="box2">サンプルボックス2</span> </div> </body> </html>
投稿2015/09/04 02:53
総合スコア730
setTimeoutは一定時間後に処理を実行する関数です
その関数を使用し、自分自身(たとえば関数Aの中でsetTimeout(A,300)のように自分)を実行させると再帰関数になります。
つまり再帰を止めるには自分自身の呼び出しが行われないようにすればいいわけですね
0
単純なことですが実行回数をカウントしておき、指定回数になった時点でsetTimeout()が実行されないようにすることで再帰関数を抜けることができます。
以下が比較的小規模のサンプルとなります。
javascript
1function countUp(__count){ 2 //表示用の数字 3 var _number=0; 4 //カウント。引数が0以下なら1として扱う 5 var _count=__count-0<0 ? 1 : __count; 6 7 function _countUp(){ 8 if(!_count){//0、負の数などであれば再帰関数を抜ける 9 return; 10 } 11 _number+=1; 12 console.log(_number); 13 //カウント 14 _count--; 15 //再帰 16 setTimeout(_countUp,500); 17 }; 18 19 //最初の1回目 20 setTimeout(_countUp,500); 21}; 22 23countUp(5);
投稿2015/09/02 13:35
総合スコア730
ご回答ありがとうございます。
コメント付きでの解説助かります。
ただ、上記のコードのどこにこういった処理をいれたら良いのでしょうか。。
質問文のコードは自作の物ですか?
質問文のコードに手を加えた物を投稿致します
(正しく動作するかは保証しませんが考え方が伝わればと)
コードはサイトにのってるものを少し変えて使っています。
こちらです。
http://gimmicklog.main.jp/jquery/212/
ありがとうございました！
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/09/03 23:30