Animate (this) nextAll parents with jquery?

Question

I am trying to animate all of the parents of an element after the one clicked.

I have tried several iterations of the following:

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

But I don't think I am getting the syntax right...

The parent element has a class of ".useritem" and I have a feeling I have to use it but I am not sure where as I thought specifying that the parent>of this item>all of them after>move up 50 px, would work.

Any help, guidance or advice would go a long way, thank you.

Edit 1: HTML

My HTML is created dynamically based on the server response. It will look like this however:

<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>

There are multiples of these stacked and when a user clicks on 'useradd' it's width is animated to 0 and the marginTop code should fire on every 'useritem' under it moving them up.

Answer 1

Thank you for your input and thank you to @Barmar for pointing out that my code /should/ have worked, I went over it again and realised where I was going wrong. I had wrapped the marginTop code in a timeout to wait for the initial clicked parent element to have a set animated width of 0. But of course when you try to call 'this' again, the element isn't there so the code didn't have an initial selector.

I fixed this by using .delay() instead. And now my initial code is working just without the timeout!

Thank you again for your input and time. This is the updated code:

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