JQuery : 원하지 않는 애니메이션 감속

Question

안녕하세요, 저는이 첫 번째 질문을 stackoverflow입니다.
메뉴를 관리하기위한 간단한 코드를 만들었습니다. 여기에 코드가 있습니다. http://jsfiddle.net/corvallo/97x89/5/

나는 "gestione 뉴스"를 클릭하면
는 모든 메뉴 요소는 텍스트 (u는 볼 수 없습니다 jsfiddle 그에) "Articoli"이 나타납니다 다른 지연 및 이미지 왼쪽으로 움직됩니다.
그래서 이미지를 클릭하면 "articoli"텍스트가 fadeOut으로 표시되고 메뉴 요소가 이전과 동일한 위치에 지연되어 다시 나타납니다.
그래서 문제는 만약 내가 4-5 번 첫 번째 애니메이션 (즉, 메뉴 요소의 슬라이딩 왼쪽)이 느려지면, 다시 시도하면 애니메이션이 느리고 느려질 것입니다.

나는 문제가 delay() 함수에 있지만 $ .each()에서는 문제가 아닐 수도 있습니다.
누군가 나를 도와 줄 수 있습니까?
미리 감사드립니다.

Answer 1

애니메이션은 분명히 작업을 마친 후 어느 정도 실행되고있는 것 같습니다. 그들은 방화범 또는 크롬에서 중지 할 때 확인하기 위해 다음을 사용

$(this).animate({"marginLeft":"0px"},"slow", function(){console.log("anim stopped");}); 

나는 그들이 계속 실행하는 이유를 잘 모르겠지만,이 같은 새로운 애니메이션을 실행하기 전에 그들을 막을 수 있습니다

$(this).stop().animate({"marginLeft":"0px"},"slow"); 

이를 겪고있는 감속 문제를 해결하는 것 같습니다.

Answer 2

div에 메뉴를 넣으십시오. 각 요소에 foreach를 수행하는 대신 main div에 애니메이션을 적용하십시오.

지연은 애니메이션 타이밍을 시작하기를 기다리는 것과 비슷하지만 많은 애니메이션을 한꺼번에 처리하는 것만으로 하나의 타이머 대신 여러 개의 내부 타이머가 시작되어 딸꾹질이 발생할 수 있습니다.