[코딩애플;JS] 제이쿼리 + 간단한 애니메이션

제이쿼리는 자바스크립트를 깔끔하게 사용할 수 있는

라이브러리다. 더 간편하고 단축된 코드로 사용이 가능하지만 듣기론 좀 무겁다는 단점이 있다.

 

https://releases.jquery.com/

jQuery CDN

<script   src="https://code.jquery.com/jquery-3.7.1.min.js"   integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="   crossorigin="anonymous"></script>

 

제이쿼리도 부트스트랩 처럼 다운로드해서 연결해서 사용할 수도 있겠지만

간단하게 CDN만 붙여서 진행하자.

사실 Cdn붙여서 하는 것보다 직접 다운로드 해서 하는 것이 안전하기는 하다.

 

  <button class="login">로그인</button>

      <div class="black-bg">

        <div class="white-bg">

          <h4>로그인하세요</h4>

          <button class="btn btn-danger" id="close">닫기</button>

        </div>

      </div>

 

 

로그인 버튼을 눌렀을 때 모달 창이 나타나고, 닫기 버튼을 눌렀을 때

사라지는 간단한 기능은

부트스트랩 강의 처럼 우선 css에 display:none 처리를 하고

.black-bg {

    width : 100%;

    height : 100%;

    position : fixed;

    top: 0;

    left: 0;

    background : rgba(0,0,0,0.5);

    z-index : 5;

    padding: 30px;

    display: none;

  }

  .white-bg {

    background: white;

    border-radius: 5px;

    padding: 30px;

  }

  .show{

    display: block;

}

 

자바스크립트, 제이쿼리 둘 다 작성하여 기능을 완성할 수 있다.

 

-자바스크립트

     document.querySelector('.login').addEventListener('click',function(){

        document.querySelector('.black-bg').classList.add('show');

        document.querySelector('.btn-danger').addEventListener('click',function(){

            document.querySelector('.black-bg').classList.remove('show');

        });

     });

 

 

-제이쿼리

     $('.login').on('click',function(){

        $('.black-bg').addClass('show');

     });

     $('.btn-danger').on('click',function(){

        $('.black-bg').removeClass('show');

     });

 

같은 기능인데 훨씬 제이쿼리가 간단하다.

document.querySelctorAll -> $

addEventListener ->on 

이런식으로 축약된 코드로도 작성될 수 있기 때문이다.

 

물론 자바스크립트로도 하는 것도 좋지만

간단하기 때문인지 아직 제이쿼리가 많이쓰이기는하다.

 

문법은 같을 뿐 조금 축약된 형태를 제공하는 JS라이브러리 일뿐이니 결국 자바스크립트 문법이 기본.

 

모달 창에 간단한 애니메이션을 주고싶으면

opacity값과 transition 값을 각각 추가해주면 된다

기본 클래스에 시작스타일.

추가되는 클래스에 최종스타일을 코딩해줌.

그리고 display:none 으로 하면 애니메이션이 잘 안먹을 수 있으니까

visibility로 수정해준다.

.black-bg {

    width : 100%;

    height : 100%;

    position : fixed;

    top: 0;

    left: 0;

    background : rgba(0,0,0,0.5);

    z-index : 5;

    padding: 30px;

    visibility: hidden;

    opacity: 0;

    transition: all 1s;

  }

  .white-bg {

    background: white;

    border-radius: 5px;

    padding: 30px;

  }

  .show{

   

    visibility: visible;

    opacity: 1;

   

}