Need help with this jQuery animation

Question

Hi,

I have a few list items and id like a slide effect between the two items that are being swapped around.

This is what I have so far. This animation works the first time around, however after that, the list items that were originally moved have a 'top' value of 0 and I'm not sure why. I think this is the reason but not sure. I've also tried setting the position back to normal once the animation completes but that didn't work either.

listItemPushed is the <li> on the top, listItem is the <li> underneath it

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 is adding css to the style attribute of the li items.

You probably need to clear these extra styles

try checking these values:

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

you probably need to clear these css attributes in your callback function after you move the pushed li

so

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

would become something like...

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');

});

After thinking about this a little more, I think you need to move the bottom object up by the height of the top element, and the top element down by the height of the bottom one.

take a look at jquery's height method:

listItem.height()