jQueryを使って要素を時計周りに動かしたく以下のようなコードを考えたのですがうまくいかなかったため、質問しました。
html
1<div class="menu_container"> 2 3 <div class="menu1_cover menu_item close s3_30" id="30"> 4 //中略 5 </div><!-- /menu-item --> 6 7 <div class="menu2_cover menu_item s3_31" id="31"> 8 //中略 9 </div><!-- /menu-item --> 10 11 <div class="menu3_cover menu_item s3_32" id="32"> 12 //中略 13 </div><!-- /menu-item --> 14 15</div><!-- /menu_container --> 16<div class="s3_next-btn">next</div> 17<div class="s3_prev-btn">prev</div>
css
1.s3_30{ 2 transform:scale(0.4); 3 top:-50px; 4 right:70%; 5 transition:all 1s ease 0s; 6 } 7 8 .s3_31{ 9 top:150px; 10 right:0%; 11 transition:all 1s ease 0s; 12 13 } 14 15 .s3_32{ 16 transform:scale(0.4); 17 top:-50px; 18 right:-70%; 19 transition:all 1s ease 0s; 20 21 }
jQuery
1$('.s3_prev-btn').click(function(){ 2 var menu_item_length=$('.menu_container').children().length; 3 var max_id=30-1+menu_item_length; 4 for( i=0; i<menu_item_length; i++){ 5 var id=( 30-1+menu_item_length )-i; 6 var id_mai1=id-1; 7 var s3_id_mai1='s3_'+id_mai1; 8 var s3_id='s3_'+id; 9 if( id_mai1 == 29 ){ 10 var s3_id_mai1='s3_'+max_id; 11 $('#'+id).addClass(s3_id_mai1); 12 $('#'+id).removeClass(s3_id); 13 $('#'+id).attr('id',max_id); 14 }else{ 15 $('#'+id).addClass(s3_id_mai1); 16 $('#'+id).removeClass(s3_id); 17 $('#'+id).attr('id',id-1); 18 }// end if 19 20 }//end for 21console.log($('.menu1_cover').attr('id')); 22console.log($('.menu2_cover').attr('id')); 23console.log($('.menu3_cover').attr('id')); 24});
prev-btnを押すとidとクラス名が変換され要素の位置が変わり対応するCSSの位置に動くと考えていたのですが一回目のみ望む動きをしたあと二回目のクリック移行は変化しないという状況になっており悩んでいます。
最後にcosole.logで各要素のidを確認したところ一回目のクリック以降は変化していませんでした。おそらくこれが原因だとは思うのですが何故変化しないのかがわからないのです。
リンク内容
上記のサイトの(1189px~769pxの幅 高さ700px以上で表示したとき)servicesの項目でprevを一回クリックしたときの挙動がやりたいことです。二回目以降も同じ挙動をしたいです。
お手数ですがわかる方がいらっしゃいましたら教えていただければ幸いです。
回答1件
あなたの回答
tips
プレビュー