'Front-End/jQueryUI' 카테고리의 글 목록 (9 Page)

[jQueryUI] 확장된 표시/ 비표시 함수 - show(), hide() toggle()

Front-End/jQueryUI 2017. 1. 10. 14:46

확장된 표시/ 비표시 함수 - show(), hide() toggle()

1. 정의

- jQueryUI를 이용하여 확장된 표시/비표시 함수 실행

2. 문법

- 표시 : $(요소).show(이펙트, 옵션, 시간, 콜백함수)

- 비표시: $(요소).hide(이펙트, 옵션, 시간, 콜백함수)

- 표시/비표시: $(요소).toggle(이펙트, 옵션, 시간, 콜백함수)

2. 예제

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box{ width:400px; height:400px; background-color: #ccc; } </style> </head> <select id="ef"> <option value="blind">Blind</option> <option value="bounce">Bounce</option> <option value="clip">Clip</option> <option value="drop">Drop</option> <option value="explode">Explode</option> <option value="fold">Fold</option> <option value="highlight">Highlight</option> <option value="shake">Shake</option> </select> <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(){ $('#move').click(function(){ $('#box').toggle($('#ef').val(),3000); }); }); </script>

- 셀렉박스 이펙트 효과에 따라 박스가 변한다

'Front-End > jQueryUI' 카테고리의 다른 글

[jQueryUI] 에니메이션 변화를 효과를 주며 지정 - Easings (0)	2017.01.11
[jQueryUI] 드래그엔드롭효과 - effect(), transfer (0)	2017.01.10
[jQueryUI] 다른스타일로 서서히 전환 - switchClass() (0)	2017.01.10
[jQueryUI] 스타일클래스 적용/제외 시 에니메이션 - addClass(), removeClass(), toggleClass() (0)	2017.01.09
[jQueryUI] 독립적인 에니메이션 구현 - animate() (0)	2017.01.09

리딩리드

,

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

Front-End/jQueryUI 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>

- 화살표 방향으로 이동

'Front-End > jQueryUI' 카테고리의 다른 글

[jQueryUI] 드래그엔드롭효과 - effect(), transfer (0)	2017.01.10
[jQueryUI] 확장된 표시/ 비표시 함수 - show(), hide() toggle() (0)	2017.01.10
[jQueryUI] 스타일클래스 적용/제외 시 에니메이션 - addClass(), removeClass(), toggleClass() (0)	2017.01.09
[jQueryUI] 독립적인 에니메이션 구현 - animate() (0)	2017.01.09
[jQueryUI] 에니메이션 종료시 처리 - 에니메이션 메소드의 두번째 인수 (0)	2017.01.09

리딩리드

,

[jQueryUI] 스타일클래스 적용/제외 시 에니메이션 - addClass(), removeClass(), toggleClass()

Front-End/jQueryUI 2017. 1. 9. 17:55

스타일클래스 적용/제외 시 에니메이션 - addClass(), removeClass(), toggleClass()

1. 정의

- 제이쿼리 표준 함수를 확장하여 사용한다

- jQuery UI의 Effect 확장

- <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>

2. 문법

- $('요소').addClass(클래스명, 시간, 콜백함수);

- $('요소').removeClass(클래스명, 시간, 콜백함수);

- $('요소').toggleClass(클래스명, 시간, 콜백함수);

3. 예제

<!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 ) } .anim{ margin-top:300px; margin-left:500px; background-Color : rgb( 250, 20, 20 ) } </style> </head> <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(){ $('#box').addClass('anim',3000); }); </script>

1) 종류

- addClass(), removeClass(), toggleClass()

'Front-End > jQueryUI' 카테고리의 다른 글

[jQueryUI] 확장된 표시/ 비표시 함수 - show(), hide() toggle() (0)	2017.01.10
[jQueryUI] 다른스타일로 서서히 전환 - switchClass() (0)	2017.01.10
[jQueryUI] 독립적인 에니메이션 구현 - animate() (0)	2017.01.09
[jQueryUI] 에니메이션 종료시 처리 - 에니메이션 메소드의 두번째 인수 (0)	2017.01.09
[jQueryUI] 제이쿼리 주요 에니메이션 메소드 (0)	2017.01.09

리딩리드

,

[jQueryUI] 독립적인 에니메이션 구현 - animate()

Front-End/jQueryUI 2017. 1. 9. 16:34

독립적인 에니메이션 구현 - animate()

- animate()를 이용하여 독립적인 에니메이션 구현이 가능하다

1. 구문

$(대상 요소).animate({

프로퍼티명: 값,...

},

시간, 롤백함수);

- 시간 밀리초 후에 [프로퍼티명:값]의 상태가 되도록 변경

2. 색상관련 프로퍼티

- backgroundColor, borderBottomColor, borderLeftColor, borderRightColor

borderTopColor, color, columnRuleColor, outlineColor, textDecorationColor, textEmpasisColor

3. 예제

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box{ width:100px; height:100px; background-color: black; } </style> </head> <div id="box"></div> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(function(){ $('#box').animate({ marginTop:'3000px', marginLeft:'500px', backgroundColor : 'blue' },3000); }); </script>

- 3 초동안 해당 위치로 이동하여 색 변경

'Front-End > jQueryUI' 카테고리의 다른 글

[jQueryUI] 확장된 표시/ 비표시 함수 - show(), hide() toggle() (0)	2017.01.10
[jQueryUI] 다른스타일로 서서히 전환 - switchClass() (0)	2017.01.10
[jQueryUI] 스타일클래스 적용/제외 시 에니메이션 - addClass(), removeClass(), toggleClass() (0)	2017.01.09
[jQueryUI] 에니메이션 종료시 처리 - 에니메이션 메소드의 두번째 인수 (0)	2017.01.09
[jQueryUI] 제이쿼리 주요 에니메이션 메소드 (0)	2017.01.09

리딩리드

,

'Front-End/jQueryUI'에 해당되는 글 38건

[jQueryUI] 확장된 표시/ 비표시 함수 - show(), hide() toggle()

'Front-End > jQueryUI' 카테고리의 다른 글

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

'Front-End > jQueryUI' 카테고리의 다른 글

[jQueryUI] 스타일클래스 적용/제외 시 에니메이션 - addClass(), removeClass(), toggleClass()

'Front-End > jQueryUI' 카테고리의 다른 글

[jQueryUI] 독립적인 에니메이션 구현 - animate()

'Front-End > jQueryUI' 카테고리의 다른 글

공지사항

카테고리

태그목록

글 보관함

달력

링크

리딩리드

LATEST FROM OUR BLOG

LATEST COMMENTS

BLOG VISITORS

티스토리툴바

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30