jQueryでクラスを置き換えるにはどうしたらよいでしょうか。


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の位置を設定するのではなく、クラス名を変更したく以下、試しに書いてみても移動せず。ご教示お願いいたします。

[code]

    $(function(){
        $(".n2")
        setTimeout(function(){
            $('.n2').toggleClass('n1');
        },3000);
    });
    
[/code]

■追記です。  
class="n1"だけ1秒停止はどのように書いたらよいでしょうか。gochoさまのサンプルを使わせていただき、変数classNameListを入れてみましたが、以下では動きませんでした。stopの定義？関数の設定がわかりません。

[code]

    if (classNameList='n1'){
        setTimeout( 'stop',1000 );
    }
    
[/code]




classNameの変更操作とclassNameによるノード選択を逐次的に行うと、処理前のノードと処理後のノードが混ざってしまってうまくいかないと思います  
一旦classNameを変更したいノード群を変数に格納することをお勧めします

実装例:

[code]

    (function() {
      var $wrapper = $('.wrapper')
      var classNameList = [
        'n1', 'n2', 'n3', 'n4', 'n5',
        'n6', 'n7', 'n8', 'n9'
      ];
      setInterval(function() {
        // classNameの変更によってquerySelectorの結果が変わらないように、querySelectorの結果を保持
        var nodes = classNameList.map(function(className) {
          return {
            className: className,
            $node: $wrapper.find('.' + className)
          };
        });
        nodes.forEach(function(current, currentIndex, whole) {
          var nextIndex = (currentIndex === whole.length - 1) ? 0 : currentIndex + 1;
          current.$node.removeClass(current.className);
          current.$node.addClass(whole[nextIndex].className);
        });
      }, 1000);
    })();
[/code]

[code]

    .something {
      width: 30px;
      height: 30px;
      float: left;
    }
    
    .n1 {
      background-color: #EDF
    }
    
    .n2 {
      background-color: #FED
    }
    
    .n3 {
      background-color: #DFE
    }
    
    .n4 {
      background-color: #EFD
    }
    
    .n5 {
      background-color: #DEF
    }
    
    .n6 {
      background-color: #FDE
    }
    
    .n7 {
      background-color: #DEF
    }
    
    .n8 {
      background-color: #FDE
    }
    
    .n9 {
      background-color: #EFD
    }
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <div class="wrapper">
      <div class="something n1"></div>
      <div class="something n2"></div>
      <div class="something n3"></div>
      <div class="something n4"></div>
      <div class="something n5"></div>
      <div class="something n6"></div>
      <div class="something n7"></div>
      <div class="something n8"></div>
      <div class="something n9"></div>
    </div>
[/code]

