Posted at

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

More than 3 years have passed since last update.


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>