関数に変数を代入して、繰り返し使いたい

Question

関数に変数を代入して、繰り返し使いたい。

jqueryでアニメーションをまとめた関数を繰り返し使いつつ、その関数に代入する変数を変えたい。超初心者です。申し訳ないです。

[例]

i = 1;
function(){
　$('li要素#id'+i).animate({'opacity': 1}, 1200);
/*など処理色々*/
}
//この関数が終わってから、
i = 2;
function(){
　$('li要素#id'+i).animate({'opacity': 1}, 1200);
/*など処理色々。i=1と同じ関数*/
}
//この関数が終わってから、
i = 3;
function(){
　$('li要素#id'+i).animate({'opacity': 1}, 1200);
/*など処理色々。i=1と同じ関数*/
}
...という風な感じです。

試したこと

for文の繰り返しだと一瞬でi=3まで行ってしまい、0で代入して処理して欲しい関数をすっ飛ばしてしまいます。
setTimeoutを使っても、もちろん時間通りには繰り返してくれるのですが、代入ができなくなってしまうようです。
変数iを配列に入れて.each()でできるかなとも思いましたが、単体のli要素を処理する方法しか見つかりませんでした。でも関数でまとめたいので。
Deferredオブジェクトもダメ元でトライしてみましたが、何のエラーメッセージも無いけれど、１ミリも動きません。

//修正・加筆１
ご指摘ありがとうございます。関数そのままの方が良いとのことなので、そのままベタっと貼ってみました。下記が関数です。

$(function(){
		//スクロール
		$('div.mouseon_scroll_slide').mouseover(function(){
    		$('div.mouseon_scroll_slide').delay(800).animate({'left': '-1950px'}, 44333); //1区分
		});
		
		$('li#mp'+i+'.main_bg_photo img').animate({'opacity': 1}, 2500);
		$('div#id_'+i+'.mouseon_scroll_slide').on('mouseover', age_and_text);
		function age_and_text(){
			$('li#lt'+i+'.life_text').fadeIn(800);
			$('li#la'+i+'.life_age').delay(600).fadeIn(800);
			};
	$('div.history_b').on('mouseover', main_photos);
		function main_photos(){
			$('li#lmp'+i+'.life_main_photos').animate({'opacity': 1}, 1000);
			$('li#lmpc'+i+'.life_main_photos_comments').fadeIn();
			$('li#lmpc'+i+'.life_main_photos_comments').animate({'top': '-190px', 'opacity': 1}, 1000);
			};
	$('div.history_c').on('mouseover', snap123);
		function snap123(){
			$('li#p'+i+'.social_snap_photos1').animate({'opacity': 1}, 1000);
			$('li#c'+i+'.social_snap_comments1').fadeIn();
			$('li#c'+i+'.social_snap_comments1').animate({'top': '3px', 'opacity': 1}, 1200); //3pxは停止場所
			$('li#p'+i+'.social_snap_photos2').animate({'opacity': 1}, 2000);
			$('li#c'+i+'.social_snap_comments2').fadeIn();
			$('li#c'+i+'.social_snap_comments2').animate({'top': '3px', 'opacity': 1}, 1600); //3pxは停止場所
			$('li#p'+i+'.social_snap_photos3').animate({'opacity': 1}, 3000);
			$('li#c'+i+'.social_snap_comments3').fadeIn();
			$('li#c'+i+'.social_snap_comments3').animate({'top': '3px', 'opacity': 1}, 2000); //3pxは停止場所
			};
	$('div.history_f').on('mouseover', snap4);
		function snap4(){
			$('li#p'+i+'.social_snap_photos4').animate({'opacity': 1}, 1000);
			$('li#c'+i+'.social_snap_comments4').fadeIn();
			$('li#c'+i+'.social_snap_comments4').animate({'top': '-110px', 'opacity': 1}, 1200); //3pxは停止場所	
			};
});
});

この関数に変数を代入し、この関数の処理が終わってから、同じ関数にi++を代入したいのです。
スクロールは関数から外してしまうこともできますが、取り敢えず組み込んであります。

Comments

[kei344]

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
また、半端なコードではなく問題を再現できるだけのHTML/JavaScriptを提示したほうが早く解決できると思います。

[kei344]

HTMLが無いと再現できませんね･･･。

Answer 1

アイデアありがとうございました。頂いたアイデアを元に試行錯誤して自己解決しました。
まだ挙動が安定していない部分もありますが、まとめます。

[解決方法]
(1)関数の分解。
(2)setIntervalを2段階で取り入れました。
(3)入れ子式の関数にそれぞれ変数を設定。

(1)関数の分解: 二つに分けました。
①横スクロールとそのsetIntervalの関数
②変数を代入するアニメーションと、その変数を繰り返し代入とsetIntervalの関数

(2)2段階setInterval

//①の関数　：横スクロールのためのsetInterval
var scr = function(){
　$('スクロール動かすためのトリガー的な要素').mouseover(function(){
　$('スクロールする要素').delay(800).animate({'left': '-2000px'}, 30000);
 //元の位置に戻るコードがないと繰り返せない(原因不明)
　$('スクロールする要素').animate({'left': '0px'}, 10);	 
　});
};
　//上記を繰り返し動かすsetInterval(元々同じフレームに違う要素を表示したかったから)
　var timer = setInterval(scr, 30000);
　setTimeout(scr, 0);

さらに、②の関数

//②の関数　：変数を代入する(以下略)
var i = 0;
var ②の関数名 = function(){
$('変数を代入したい要素'+i).fadeIn(800);
　　//ネストの場合は、それぞれに変数を宣言(何故かiが代入できないから)
　　$('トリガー的な要素').on('mouseover', ネストの関数名);
		var m = 0;
		function ネストの関数名(){
	$('変数を代入したい要素'+m+).animate({'opacity': 1}, 1000);
		return m++;　//個人的にreturn不要説もあり。
		}
 return i++;
}
	var timer = setInterval(②の関数名, 30000);
		setTimeout(②の関数名, 0);

(3)入れ子式の関数
ローカルだろうとグローバルだろうと、何処吹く風だったので関数の中で変数を宣言　
(良い方法かどうかは分かりませんが、個別に設定すると動く)

まだまだ分からない事だらけですが、頑張ります。

Answer 2

こういうこと？

<script>
$(function(){
  var time=1200;
  var i=1;
  var timerId=setInterval((function hoge(){
    $('#id'+i).animate({'opacity': 0}, time);
    if(++i>3) clearInterval(timerId);
    return hoge;
  }()),time);
});
</script>

<ul>
<li id="id1">1</li>
<li id="id2">2</li>
<li id="id3">3</li>
</ul>  

Answer 3

HTMLがないので手元で再現できませんが、jQueryの.animateではアニメーションが完了した時点で始める処理も指定できます。おおよそ以下のようなものです。

var i = 1;
$('li要素#id'+i).animate({'opacity': 1}, 1200, function(){
    //次の処理
    i ++;
    $('li要素#id'+i).animate({'opacity': 1}, 1200, function(){
        //その次の処理
        i ++;
        $('li要素#id'+i).animate({'opacity': 1}, 1200);
    });
});