jquery - 需要有关此 jQuery 动画的帮助

Question

我有一些列表项和 id，就像正在交换的两个项目之间的幻灯片效果。

这就是我到目前为止所拥有的。这个动画第一次工作，但在那之后，最初移动的列表项的“顶部”值为 0，我不知道为什么。我认为这是原因，但不确定。一旦动画完成，我也尝试将位置设置回正常，但这也不起作用。

listItemPushed是<li>在上面，listItem是在<li>下面

listItemPushed.css('position', 'relative');
listItem.css('position', 'relative');

var top1 = listItemPushed.position().top;
var top2 = listItem.position().top;

listItemPushed.animate({ top: (top2-top1) }, 300);
listItem.animate({ top: (top1 - top2) }, 300, 'linear', function() {
    listItemPushed.before(listItem);
});

Answer 1

animate正在将 css 添加到li项目的样式属性中。

您可能需要清除这些额外的样式

尝试检查这些值：

alert(listItem.css('top'));
alert(listItemPushed.css('top'));

移动推送后，您可能需要在回调函数中清除这些 css 属性li

所以

listItemPushed.animate({ top: (top2-top1) }, 300);
listItem.animate({ top: (top1 - top2) }, 300, 'linear', function() {
    listItemPushed.before(listItem);
});

会变成……

listItemPushed.animate({ top: (top2-top1) }, 300);
listItem.animate({ top: (top1 - top2) }, 300, 'linear', function() {
    listItemPushed.before(listItem);

    listItem.css('top', '0');
    listItemPushed.css('top', '0');

});

在考虑了更多之后，我认为您需要将底部对象向上移动顶部元素的高度，并将顶部元素向下移动底部元素的高度。

看看jquery的height方法：

listItem.height()