質問: jQueryでクラスを置き換えるにはどうしたらよいでしょうか。 1秒後にclass="n1"がclass="n10"に変更 1秒後にclass="n2"がclass="n1"に変更 2秒後にclass="n3"がclass="n2"に変更 3秒後にclass="n4"がclass="n3"に変更 4秒後にclass="n5"がclass="n4"に変更 5秒後にclass="n6"がclass="n5"に変更 6秒後にclass="n7"がclass="n6"に変更 7秒後にclass="n8"がclass="n7"に変更 8秒後にclass="n9"がclass="n8"に変更 9秒後にclass="n10"がclass="n9"に変更 10秒後は1秒後からの繰り返しです。 あらかじめcssでは、n1~n10の座標(position)を指定していますので、1秒ごとに移動するイメージです。 classは、n10迄、計10個ある為、jQueryでcssの位置を設定するのではなく、クラス名を変更したく以下、試しに書いてみても移動せず。ご教示お願いいたします。 ``` $(function(){ $(".n2") setTimeout(function(){ $('.n2').toggleClass('n1'); },3000); }); ``` ■追記です。 class="n1"だけ1秒停止はどのように書いたらよいでしょうか。gochoさまのサンプルを使わせていただき、変数classNameListを入れてみましたが、以下では動きませんでした。stopの定義?関数の設定がわかりません。 if (classNameList='n1'){ setTimeout( 'stop',1000 ); }
回答: 次の様な感じでいいかと思います。 ``` $(function(){ var i = 1;//開始の番号 setInterval(function(){ var next_i = (i==1) ? 10 : i-1;//10は最大の番号 $(".n" + i).toggleClass("n" + next_i).toggleClass("n" + i); ++i; }, 1000); }); ```