jQueryを使って要素をスライドさせたい。

Question

jQueryを使って要素を時計周りに動かしたく以下のようなコードを考えたのですがうまくいかなかったため、質問しました。

<div class="menu_container">
                
  <div class="menu1_cover menu_item close s3_30" id="30">
    //中略
  </div><!-- /menu-item -->

  <div class="menu2_cover menu_item s3_31" id="31">
    //中略
  </div><!-- /menu-item -->

  <div class="menu3_cover menu_item s3_32" id="32">
    //中略
  </div><!-- /menu-item -->

</div><!-- /menu_container -->
<div class="s3_next-btn">next</div>
<div class="s3_prev-btn">prev</div>

.s3_30{
        transform:scale(0.4);
        top:-50px;
        right:70%;
        transition:all 1s ease 0s;
    }

    .s3_31{
        top:150px;
        right:0%;
        transition:all 1s ease 0s;

    }

    .s3_32{
        transform:scale(0.4);
        top:-50px;
        right:-70%;
        transition:all 1s ease 0s;

    }

$('.s3_prev-btn').click(function(){
  var menu_item_length=$('.menu_container').children().length;
  var max_id=30-1+menu_item_length;
  for( i=0; i<menu_item_length; i++){
  var id=( 30-1+menu_item_length )-i;
  var id_mai1=id-1;
  var s3_id_mai1='s3_'+id_mai1;
  var s3_id='s3_'+id;
  if( id_mai1 == 29 ){
    var s3_id_mai1='s3_'+max_id;
    $('#'+id).addClass(s3_id_mai1);
    $('#'+id).removeClass(s3_id);
    $('#'+id).attr('id',max_id);
  }else{
    $('#'+id).addClass(s3_id_mai1);
    $('#'+id).removeClass(s3_id);
    $('#'+id).attr('id',id-1);
  }// end if
  
 }//end for
console.log($('.menu1_cover').attr('id'));
console.log($('.menu2_cover').attr('id'));
console.log($('.menu3_cover').attr('id'));
});

prev-btnを押すとidとクラス名が変換され要素の位置が変わり対応するCSSの位置に動くと考えていたのですが一回目のみ望む動きをしたあと二回目のクリック移行は変化しないという状況になっており悩んでいます。
最後にcosole.logで各要素のidを確認したところ一回目のクリック以降は変化していませんでした。おそらくこれが原因だとは思うのですが何故変化しないのかがわからないのです。

リンク内容
上記のサイトの（1189px～769pxの幅　高さ700px以上で表示したとき）servicesの項目でprevを一回クリックしたときの挙動がやりたいことです。二回目以降も同じ挙動をしたいです。
お手数ですがわかる方がいらっしゃいましたら教えていただければ幸いです。

Comments

[kyoya0819]

CSSでいくと煩雑になってしまうので根本的に書き直さないといけないように思います。それでも良いでしょうか？

[knight1220]

ありがとうございます。
教えていただけると大変うれしいです。

Answer 1

jQueryのコードを以下のように変更することで期待通りの動きになりました。
ついでに逆回転のコードも記載しておきます。

//menuの回転(prev)
$('.s3_prev-btn').click(function(){
  var menu_item_length=$('.menu_container').children().length;
  var max_id=30-1+menu_item_length;
  for( i=1; i<menu_item_length+1; i++){
  var id=$('.menu'+i+'_cover').attr('id');
  var id_mai1=id-1;
  var s3_id_mai1='s3_'+id_mai1;
  var s3_id='s3_'+id;
  var menu_num=$('.menu'+i+'_cover');
  if( id_mai1 < 30 ){
    var max_class='s3_'+max_id;
    menu_num.addClass(max_class);
    menu_num.removeClass(s3_id);
    menu_num.attr('id',max_id);
  }else{
    menu_num.addClass(s3_id_mai1);
    menu_num.removeClass(s3_id);
    menu_num.attr('id',id_mai1);

  }// end if
  
 }//end for

});


//menuの回転(next)
$('.s3_next-btn').click(function(){
  var menu_item_length=$('.menu_container').children().length;
  var max_id=30-1+menu_item_length;
  for( i=1; i<menu_item_length+1; i++){
  var id=$('.menu'+i+'_cover').attr('id');
 //Number('');で明示的にidが数字であることを示している。（attr('id')で取得した値は文字列扱い。足し算以外の時は暗黙の了解でオートで数字として扱ってくれるが足し算は文字の連結として扱われるため、明示的に数字であることを示さなければならない。）
  var id_puls1=Number(id)+1;
　var s3_id_puls1='s3_'+id_puls1;
  var s3_id='s3_'+id;
  var menu_num=$('.menu'+i+'_cover');
  console.log(id_puls1);
  if( id_puls1 > max_id ){
    var min_class='s3_30';
    var min_id=30;
    menu_num.addClass(min_class);
    menu_num.removeClass(s3_id);
    menu_num.attr('id',min_id);
  }else{
    menu_num.addClass(s3_id_puls1);
    menu_num.removeClass(s3_id);
    menu_num.attr('id',id_puls1);
    

  }// end if
  
 }//end for
});