Question

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

这是我到目前为止所拥有的。这个动画第一次工作，但在那之后，最初移动的列表项的'top'值为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'));

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

所以

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's height method：

listItem.height()

需要这个jQuery动画的帮助

1 个答案: