jquery lesson2 (학습 55일차 TIL)

210831 비가오는 8월의 마지막 날... 제이쿼리 두 번째 시간으로 event, effect, animate에 대해 학습했다.

Must Remember

※ 제이쿼리 1.x.x 버전을 사용하는 이유 ※

• 구형 브라우저에 가장 안정적인 버전이다.
• 아직 우리나라 공공기관은 구버전 익스플로러를 간과할 수 없기 때문에...1.x.x 버전을 사용 하는 것을 권장한다.
• 1.x.x 버전 중 가장 안정적인 버전은 jquery-1.12.4 이라고 한다.

추가로 알아둬야 할 것.

• animate로 background color와 같은 동적이지 않은 요소를 변경시키기 위해서는 jquery ui를 사용해야 함.
• jquery.easing으로 다양한 속도 효과를 설정할 수 있다.

Jquery Method Basic

/* bind는 띄어쓰기로 구분하여 여러개의 효과를 적용할 수 있다. */
$('#btn3').bind('mouseover focus', function() {
  $('#textZone').css('color', 'green');
});

/* mouseenter는 넓은 범위(하위 요소까지 적용하는)에 적합하다. */
$('#listWrap').mouseenter(function (){
  $('.list1').css('display', 'block');
});
$('#listWrap').mouseleave(function (){
  $('.list1').css('display', 'none');
});

$('.hover').hover(function() {
  $(this).css('color', 'aqua');
}, function() { 
  $(this).css('color', 'red');
});

// animate도 체이닝 가능 background는 jquery ui로 변경되도록 가능
$('#box1').animate({'width':'200px', 'height':'200', 'opacity':'0.5', 'left':'500px', 'background-color':'green'}, 2000, 'easeInOutBounce').animate({'width':'100px', 'height':'100', 'opacity':'1', 'left':'0', 'background-color':'blue'}, 2000, 'easeInOutBounce');

// 현재 진행중인 효과 정지
$('#rightBtn').click(function (){
  $('#box2').stop().animate({'left':'+=100'}, 300, 'linear');
});

// 큐에 쌓인 효과들을 삭제
$('#leftBtn').click(function (){
  $('#box2').clearQueue().animate({'left':'-=100'}, 300, 'linear');
});