[웹3]240327-12일차(아코디언_제이쿼리_애니메이션/스와이퍼)

https://codepen.io/limyena/pen/yLroJpw

애니메이션

 

[애니메이션 주의사항]

- html구조가 사라진 후 애니메이션이 적용되면 소용없다.

- Up을 사용했으면 Down도 사용해야한다.

- 나오고 들어가는 구조마다 애니메이셔이 전부 적용되어야 한다.

 

[사용조건]

후손선택자 이벤트 find(".선택자")

 

$("선택자").slideaUp(300);

$("선택자").slideaDown(300);

 

- 우선 퍼즐조각으로 써주고 끼워맞추기

 

 

$("선택자").slideaUp(300); -> remove에

$("선택자").slideaDown(300); -> add에 적어주고

모르는건 우선 그냥 두기

 

 

 

 

https://codepen.io/limyena/pen/BaEdzbP

스와이퍼 기초

- 각각 복사해서 htm/css/에 붙여넣기

 

- 개발자모드에서 복사/css에 붙여넣고 주석처리

 

 

 

 

- margin: 0;을 적용하기위해  html에 swiper-box를 만들었다.

  ㄴ왜냐하면 이미 구성되어있는 코드를 깨려면 css는 더 강한 힘이 필요하기 때문에 더 큰 박스로 감싸주고

      코드를 적용시킨다.

 

- 스와이퍼한테는 높이를 꼭 줘야함

 

https://codepen.io/pen

Create a New Pen