[jQueryUI] 다른스타일로 서서히 전환

Front-End/jQueryUI

[jQueryUI] 다른스타일로 서서히 전환 - switchClass()

리딩리드 2017. 1. 10. 13:44

다른스타일로 서서히 전환 - switchClass()

1. 정의

- 현재 적용된 스타일 클래스를 다른 스타일 클래스로 변경

1) toggleClass vs switchClass

- toggleClass() : 단일 클래스 적용/제외 제어

- switchClass() : 여러 개의 클래스를 변경

2. 문법

- $(요소).switchClass(삭제 클래스, 추가 클래스, 시간, 콜백함수)

2. 예

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> <style> #box{ width:100px; height:100px; background-color: rgb( 20, 20, 20 ) } .def{ margin-top : 0px; margin-left:0px; background-color: violet; } .anim{ margin-top:300px; margin-left:500px; background-Color : rgb( 250, 20, 20 ) } </style> </head> <input type="button" id="move" value="move"/> <div id="box"></div> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> <script> $(function(){ var flag = true; $('#move').click(function(){ if(flag){ $('#box').switchClass('def','anim',3000); } else{ $('#box').switchClass('anim','def',3000) } flag = !flag; //플래그 변경 }); }); </script>

- 화살표 방향으로 이동