classNameの変更操作とclassNameによるノード選択を逐次的に行うと、処理前のノードと処理後のノードが混ざってしまってうまくいかないと思います 一旦classNameを変更したいノード群を変数に格納することをお勧めします 実装例: <!-- begin snippet: js hide: true console: true babel: false --> <!-- language: lang-js --> (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); })(); <!-- language: lang-css --> .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 } <!-- language: lang-html --> <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> <!-- end snippet -->