[jQuery] 애니메이션이나 효과를 중지 시키는 stop()

 

 

 

 

 

728x90

 

 

개요

 

 

이전 포스팅에서 아래로 슬라이드와 위로 슬라이드, 트리거 사용을 해보았는데요.

이번에는 슬라이드 같은 애니메이션을 사용할 때 애니메이션을 나는 그만보고 싶다. 혹은 웹게임을 만들 때, 움직이는 몬스터들에게 꼼짝 못 하게 하는 기능 등 이런저런 상황에서 사용될 수 있는 제이쿼리의 stop() 메서드에 대해서 알아보도록 하겠습니다.

 

---

 

 

동작 화면

 

 

슬라이드 클릭시 애니메이션 동작화면

 

동작하는 이미지는 위와 같습니다.

아래로 슬라이드를 눌러서 슬라이드 애니메이션이 작동중일 때,

슬라이드 멈추기 버튼을 누르면 작동하는 중간에 애니메이션이 멈추게 됩니다.

 

 

코드

 

이전에 사용했던 슬라이드 애니메이션을 활용하여 stop() 메서드를 사용해 보겠습니다.

 

<button id="stop" class="ws-btn" style="background:red">슬라이드 멈추기</button>

<div id="flip" class="ws-btn">아래로 슬라이드</div>
<div id="upflip" class="ws-btn">위로 슬라이드</div>
<div id="panel">Hello world!</div>

 

 

슬라이드 멈추기 버튼 아래로 슬라이드 위로 슬라이드 버튼을 생성해 주었습니다.

슬라이드 버튼 하나에 트리거를 걸어서 한번 누르면 아래로 한번 누르면 위로 슬라이드 되게 하셔도 됩니다.

 

 

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(2000);
  });
  $("#upflip").click(function(){
    $("#panel").slideUp(2000);
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
});

 

 

다음 스크립트 코드입니다.

 

먼저 슬라이드를 당할 panel 박스를 하나 만들어 줍니다.

이 박스가 버튼을 클릭할 때마다 위로 혹은 아래로 슬라이드 되며 애니메이션 효과를 보여줄 것입니다.

 

id가 flip인 아래로 슬라이드 버튼을 클릭하면,

slideDown이 작동을 하며 괄호 안의 2000밀리 초의 시간만큼 애니메이션이 진행됩니다.

 

마찬가지로 위로 슬라이드 버튼을 클릭하면 반대로 동작하게 되겠죠.

 

그리고 슬라이드 멈추기 버튼을 누르면 stop() 메서드가 작동하여 슬라이드 애니메이션이 중간에 멈추게 됩니다.

 

 

#panel {
  padding: 5px;
  font-size: 18px;
  text-align: center;
  background-color: #555;
  color: white;
  border: solid 1px #666;
  border-radius: 3px;
  width: 400px;
}

#panel {
  padding: 50px;
  display: none;
}
.ws-btn {
    font-size: 17px;
    border: none;
    border-radius: 5px;
    display: inline-block;
    padding: 6px 18px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    background-color: #04AA6D;
    color: #ffffff;
}

 

 

다음은 css 코드입니다.

버튼의 색상과 글자색상 그리고 패널의 색상과 크기를 지정해 두었습니다.

 

이렇게 하여 간단하게 애니메이션을 멈추는 기능을 가진 버튼을 완성했습니다.

 

---

 

결론

 

 

오늘은 stop() 메서드에 대해서 알아보았습니다.

이런 애니메이션 동작을 제어하는 제이쿼리들을 잘 활용하면,

좀 더 역동적이고 사람들의 눈길을 끌 수 있는 홈페이지나 작품들을 만들 수 있겠죠.

 

애니메이션이 동작하는 것도 중요하지만,

과하지 않게 멈춰주는 것도 중요하다 생각합니다.