クラスの追加と削除を遅らせるちょっとしたメソッド

delayAddClass delayRemoveClass

addClassをするタイミングをずらしたいので、簡単にdelayAddClassというメソッドを考えてみた。
これら一連のキューをリピートするメソッドって作れないのかな？

(function($){
    $.fn.delayAddClass = function(className,delay){
        return $(this).delay(delay).queue(function(next){
            $(this).addClass(className);
            next();
        });
    };
    $.fn.delayRemoveClass = function(className,delay){
        return $(this).delay(delay).queue(function(next){
            $(this).removeClass(className);
            next();
        });
    }
})(jQuery);

使い方

<style>
.test{
    position: fixed;
    top: 0;
    left: 0;
    -webkit-transition: all .3s ease-in-out;
       -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
         -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
}
.test.state1{
    top: 0;
    left: 50px;
}
.test.state2{
    top: 50px;
    left: 50px;
}
.test.state3{
    top:50px;
    left: 0;
}
</style>
<script>
$(".test")
.delayAddClass("state1",300)
.delayAddClass("state2",300)
.delayAddClass("state3",300)
.delayRemoveClass("state1 state2 state3",300);
</script>