jQuery - 효과

jQuery - 효과

jQuery 효과

공통 인수 duration : 효과 진행 속도(slow / normal / fast) callback : 효과 완료 후 수행할 함수 easing : 전체 애니메이션(효과)의 적용 시간 비율을 원하는 진행 비율로 매핑 swing : sin곡선(느리게 시작해서 중간에 빠르게 진행되다가 나중에 다시 느려지는 효과) linear : 선형 곡선(시작부터 끝까지 일정한 속도)

jQuery로 가능한 시각적 효과 Basic 효과 hide() : 요소 숨기기 show() : 요소 표시(출력) toggle() : 요소를 숨기거나 표시 (hide() / show() 교대로 실행) Sliding 효과 slideDown() : 요소를 슬라이딩 효과로 나타나게 함 slideUp() : 요소를 슬라이딩 효과로 숨김 slideToggle() : 숨겼다 보였다 교대로 실행(slideDown() / slideUp() 교대로 실행) Fading 효과 fadeIn() : 요소를 선명하게 만들면서 나타남 fadeOut() : 요소를 흐리게 하면서 숨김(영역도 사라짐) fadeToggle() : fadeIn() / fadeOut() 교대로 실행 fadeTo() : 요소의 불투명도 조정, 투명도 0으로 안 보여도 영역은 그대로 남아 있음. Animate 효과 animate(속성) 형식 $(대상).animate( {속성(CSS)}, duration(효과 진행 속도), 'easing'(진행 효과) ); $(대상).animate( {속성(CSS)}, duration(효과 진행 속도), 'easing'(진행 효과), function() { 효과 완료 후 수행할 내용 } ); 애니메이션 정지 $(선택자).stop(); // false로 입력한 것으로 간주 $(선택자).stop(true); // clearQueue $(선택자).stop(true, true); // clearQueue, goToEnd clearQueue : 대기열에 있는 함수 모두 제거, 예약된 애니메이션 초기화(clearQueue() 메소드 실행 효과) goToEnd : 제자리에서 멈추는 것이 아니라 지정한 최종 상태에서 멈춤

Basic효과 예제 - basicEffect.html

#wrap { margin:0 auto; width:800px; text-align:center; } .menuItem { display:inline-block; margin:20px; } hr { margin-bottom:20px; } $(document).ready(function() { $('#show').on('click', function() { $('img').show('slow'); }) $('#hide').on('click', () => { $('img').hide('fast'); }) // toggle1 버튼 : 속도 0.5초 $('#toggle1').on('click', () => { $('img').toggle(500); }) // toggle2 버튼 : 속도 3초 swing $('#toggle2').on('click', () => { $('img').toggle(3000, 'swing'); }) // toggle3 버튼 : 속도 3초 linear $('#toggle3').on('click', () => { $('img').toggle(3000, 'linear'); }) }); Basic 효과 show hide toggle1 0.5초 toggle2 3초 'swing' toggle3 3초 'linear'

Sliding효과 예제 - slideEffect.html

*{ text-align:center;} #menuBox {width:100px; margin:0 auto; margin-bottom:30px;} #menuBox:hover { background-color:orange; color:blue; font-weight:bold; } #subMenuBox {display:none; } $(document).ready(function() { $('#menuBox').hover( // 메뉴에 마우스 올리면 subMenuBox가 slideDown 되면서 영역이 나타나고 이미지 보임 function() { $('#subMenuBox').slideDown(1000); }, // 메뉴에 마우스 떼면 subMenuBox가 slideUp 되면서 영역이 사라지고 이미지 안 보임 function() { $('#subMenuBox').slideUp(1000); } ); }); Sliding 효과 메뉴 버튼의 위치는?

Fading 예제 - fadeEffect.html, fadeToEffect.html

h2{ width:300px; height:40px; padding:10px; background-color:red; color:yellow; display:none; } ul { list-style:none; } /* type 없음 */ li { display:inline-block; margin-right:30px; } $(document).ready(function() { $('#fadeIn').on('click', function() { $('h2').fadeIn('slow'); }); // 영역도 사라진다. $('#fadeOut').on('click', function() { $('h2').fadeOut(2000); }); $('#fadeToggle').on('click', function() { $('h2').fadeToggle(3000, 'linear'); }) }); Fading 효과 fadeIn fadeOut fadeToggle Have a Nice Day! 난 어디에 놓일까?

ul { list-style:none; } li { display:inline-block; margin-right:30px; } $(document).ready(function() { // 투명도가 0이 되어 보이지 않아도 영역은 남아 있다. $('#off').on('mouseover', function() { $('img').fadeTo(1000, 0); }); $('#on').on('mouseover', function() { $('img').fadeTo(1000, 1); }); $('#50').on('mouseover', function() { $('img').fadeTo(1000, 0.5); }); }); fadeTo() 효과 opacity : 0 opacity : 1 opacity : 0.5 난 어디에 놓일까?

Animate 예제 - animate1.html, animate2.html, animate3.html

div { width: 50px; height: 50px; line-height:50px; text-align:center; background-color: rgb(0, 176, 240); position: relative; } $(document).ready(function() { $('div').hover( function () { $(this).animate({left:500}, 1000); }, function() { $(this).animate({left:0}, 4000); } ); }); 12 34 56

$(document).ready(function() { $('#startBtn').on('click', function() { $('div').each(function(index) { $(this).delay(index * 500).animate( {left:500}, 'slow' ); }); }); $('#backBtn').on('click', function() { $('div').each(function(index) { $(this).delay(index * 500).animate( {left:0}, 'slow' ); }); }); }); 이동 원위치 $(document).ready(function() { $('#startBtn').on('click', function() { $('div').each(function(index) { $(this).delay(index * 500).animate( {left:500}, 'slow' ); }); }); $('#backBtn').on('click', function() { $('div').each(function(index) { $(this).delay(index * 500).animate( {left:0}, 'slow' ); }); }); }); 이동 원위치

$(document).ready(function() { $('#box1').animate({left: '+=100'}, 1000) .animate({width: '+=100'}, 2000) .animate({height: '+=100'}, 2000); // 6초 후에 함수 실행 setTimeout(function(){ $("div").clearQueue(); $("div").hide(); }, 6000); $('#box2').animate({left: '+=100'}, 1000) .animate({width: '+=100'}, 2000) .animate({height: '+=100'}, 2000, function(){ $(this).css('transform', 'rotate(30deg)'); } ); });

from http://5bong2-develop.tistory.com/118 by ccl(A) rewrite - 2021-12-15 15:27:32