05_효과메서드,jQueryUI확장라이브러리,헤더전체메뉴

[효과메서드]

addClass(),removeClass(),toggleClass(),hasClass()

slideUp(),slideDown(),slideToggle()

fadeIn(),fadeOut(),fadeToggle()

show(),hide(),toggle()

animate() - jQuery UI 확장라이브러리 사용시 easing옵션 변경가능

stop()

​

주력사용

addClass() 제일중요

​

클래스 추가 addClass(),

클래스 지우기 removeClass(),

이벤트 안에서 왔다갔다 toggleClass(),

hasClass()

 

---

 

언제사용하나?

 

 

이렇게 같은 사이트에서 스크롤을 내릴시 

헤더의 색이 은은하게 변경된다. 

예제 연습하기

 

---

#header {
    background: #ddd;
    transition: all 0.5s;
    height: 100px;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 9999;
}
#header.on {
    background: yellowgreen;
    height: 150px;
}

css 먼저 작성

#header.on

위치에 on을 꼭 붙여서 걸어준다.

 

 

 

 

$(function () {
  $(window)
    .on('scroll', function () {
      var st = $(this).scrollTop();

      if (st >= 100) {
        $('#header').addClass('on');
      } else {
        $('#header').removeClass('on');
      }
    })
    .trigger('scroll');

버튼에 토글로

​

var btnFlag = true;

불린타입으로 왔다갔다하자

 

 

 

---

  $('#header .btn').on('click', function () {
    if (btnFlag) {
      $(this).addClass('on');
    } else {
      $(this).removeClass('on');
    }
    console.log(btnFlag);
  });

이상태면 버튼에 색이 빠지지 않음

btnFlag = false;

btnFlag = true;

​

넣어줘야함

 

 

이렇게 if문에 flase, true로 색이 빠지게 한다 

  $('#header .btn').on('click', function () {
    if (btnFlag) {
      $(this).addClass('on');
      btnFlag = false;
    } else {
      $(this).removeClass('on');
      btnFlag = true;
    }

한줄로 간편하게 처리해보자

  var btnFlag = true;

  $('#header .btn').on('click', function () {
    if (btnFlag) {
      $(this).addClass('on');
      // btnFlag = false;
    } else {
      $(this).removeClass('on');
      // btnFlag = true;
    }
    // 클릭시 마다 btnFlag를 변경하여 스위치동작 구현
    btnFlag = !btnFlag;
    console.log(btnFlag);
  });

 flase, true 지정없이도 한줄로 깔끔

버튼이 껐다 켰다 하는 스위치 동작을 만들땐 반드시 이동작으로 하되 더 쉬운방법으론

  // 더 쉽게 만들어보기
  // 메서드에 토글 기능이 제공되는 경우 사용
  $('#header .btn').on('click', function () {
    $(this).toggleClass('on');
  });
});

 

토글기능을 활용하는 방법도있다. 

 

 

---

hasclass 로 확인하기

 

// 특정요소에 클래스 유무 판단하기 console.log($('header').hasClass('on'));

 

---

trigger을 거는이유 ?

스크롤이 되어있는 상태에서도 헤더가 펼처지도록

// 스크롤이벤트 로딩시 한번 실행 .trigger('scroll');

트리거가 없으면

 

 

 

 

스크롤이 내려와있어도 헤더가 보이지 않음

 

트리거 실행시 스크롤위치 상관없이 보임