Javascript 用jquery为下一代父母制作动画？

我正在尝试在单击一个元素后为该元素的所有父元素设置动画

我已经尝试了以下几个迭代：

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

但是我觉得我的语法不对

父元素有一个“.useritem”类，我觉得我必须使用它，但我不确定在哪里可以使用，因为我认为指定这个项目的父元素>所有它们在>向上移动50 px之后都可以工作

任何帮助、指导或建议都会大有帮助，谢谢

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

0
使用者

---

有多个堆叠在一起，当用户单击“useradd”时，它的宽度被设置为0，并且marginTop代码应该在它下面的每个“useritem”上触发，将它们向上移动

感谢您的输入，也感谢@Barmar指出我的代码/应该/已经工作了，我重新检查了一遍，意识到我错在哪里。我将marginTop代码包装在一个超时中，以等待初始单击的父元素具有设置为0的动画宽度。当然，当您再次尝试调用“this”时，元素不存在，因此代码没有初始选择器

我改为使用.delay（）解决了这个问题。现在，我的初始代码正在工作，没有超时

再次感谢您的投入和时间。这是更新的代码：

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

---

您是否尝试过

prevAll（）

？显示您的HTML并解释您尝试设置动画的元素。您所说的“所有父元素”是什么意思？您是指下一个元素的父元素，然后是该父元素的父元素，以及该父元素的父元素，等等。？我认为一个元素本身不能有多个父元素。看起来你的代码应该可以工作。你能用多个

.useritem

div和CSS来做一个更完整的例子来说明这个问题吗？