Animate (this) next jquery를 가진 부모?

Question

클릭 한 후 요소의 부모를 모두 애니메이션으로 만들려고합니다.

나는 다음과 같은 몇 가지 반복 시도 :

$(this).parent().nextAll().animate({ 
    marginTop: '-=50px' 
}, 500); 

을하지만 내가 구문 권리를 얻고 생각하지 않는다 ...

부모 요소는 ".useritem"의 클래스가 나는 그것을 사용해야한다는 느낌이 들지 만,이 항목의 부모> 모두가 50px 위로 이동하면 작동 할 것이라고 생각하는 곳을 모르겠습니다.

도움, 안내 또는 조언이 도움이 될 것입니다. 감사합니다.

편집 1 : HTML은

내 HTML 동적 서버 응답을 기반으로 만들어집니다. 그것은이 그러나 다음과 같이 표시됩니다

<div id='useritem' class='useritem'> 
    <div id='msgnotification' class='msgnotification'>0</div> 
    <img id='userimg' class='userimg' src='data/here'> 
    <div id='usertxt' class='usertxt'> 
     <div id='name' class='name'>User</div> 
     <div id='username' class='username'></div> 
    </div> 
    <div id='useradd' class='useradd'><i class='fa fa-user-plus'></i></div> 
</div> 

이의 배수가 있습니다 이러한 스택과 사용자가 'useradd와'를 클릭 할 때 그것은 폭이 0으로 애니메이션과 marginTop 코드를 움직이는 그 아래 모든 'useritem'에 발사한다입니다 쪽으로.

Answer 1

입력 해 주셔서 감사 드리며 @Barmar에게 내 코드/작동/작동에 대해 알려 주셔서 감사합니다. 다시 시도하고 잘못 된 부분을 알았습니다. 나는 초기 클릭 된 부모 요소가 0의 애니메이션 폭을 갖기를 기다리기 위해 타임 아웃에서 marginTop 코드를 감쌌다. 그러나 물론 'this'를 다시 호출하려고 할 때, 요소는 거기에 없기 때문에 코드가 ' 초기 선택기가 있습니다.

대신 .delay()를 사용하여이 문제를 해결했습니다. 그리고 이제는 초기 코드가 시간 초과없이 작동하고 있습니다!

입력 해 주셔서 다시 한 번 감사드립니다. 이것은 업데이트 된 코드입니다 :

$(this).parent().animate({ 
    'width': 0, 
    'padding-left': 0, 
    'padding-right': 0 
}, 300, function() { 
    $(this).next().animate({ 
     marginTop: '-=61px' 
    }, 300); 
});