[jQuery] 애니메이션이 진행 중이지 않을 때만 애니메이션 실행하기

글 제목이.. 참 거시기 한데.. 쉽게 말하면 이런 것이다. 상품이미지를 좌우로 슬라이딩 시킬 때 이전, 다음 버튼을 습관(?)적으로 연속해서 클릭하는 경우가 있는 데 이럴 경우 슬라이딩 이미지가 겹치게 되는 문제가 생긴다. 이런 현상을 막기 위해 애니메이션이 진행 중일 때는 버튼을 클릭하더라도 애니메이션을 실행하지 않아야 하는데.. 이것을 간단하게 구현하는 방법이다. 이전까지는 아래와 같은 코드를 사용했다.

if(!$("div").is(":animated")) {
    $("div").animate({ left: "+=200px" }, 1000);
}

위 코드를 좀 더 간단하게 만든 것이 아래의 코드이다.

$("div").filter(":not(:animated)").animate({ left: "+=200px" }, 1000);

위 코드와 아래 코드는 똑같이 작동을 한다. 어떤 코드가 좋다고 하기는 개인차가 있을테니 정할 수가 없지만 타이핑을 하는 입장이라면 아무래도 아래의 코드가 좀 더 사용하기 쉽지 않을까 스스로는 생각을 하고 있다. 그리고 예의 코드는 엘리먼트가 하나이지만 애니메이션이 실행되는 엘리먼트가 여러 개라면 확실히 아래의 코드가 적용하기 쉬울 것이라 생각한다. 모든 엘리먼트에 if 문을 작성하는 것은 코드도 깔끔하지 않고 상당히 귀찮은 일일 것이라 생각된다.