Question

我有以下代码来动画上下动画div。这个想法是可能有任意数量的div需要在堆栈中上下移动，使用上方和下方的div交换位置。一旦进入新的位置，我需要能够抓住新的重新定位。以下代码可以工作一次，但是一旦下部div向上移动并且上部向下移动（交换点）到新位置，它们就会停止工作。如何设置它以便它们将继续遍历堆栈，在它们移动时立即交换上面或下面的堆栈？一旦完成更新数据库，我还需要知道新的职位。我一直在寻找，但似乎无法找到如何做到这一点。任何帮助将不胜感激。

$('.editUp', this).click(function() {
   thisRowHt = $(this).parents('.rowCont').outerHeight();
   upperRowHt = $(this).parents('.rowCont').prev().outerHeight();
   $(this).parents('.rowCont').animate({'top': '-=' + thisRowHt + 'px'});
   $(this).parents('.rowCont').prev().animate({'top': '+=' + upperRowHt + 'px'});
   return false;
});

$('.editDown', this).click(function() {
   thisRowHt = $(this).parents('.rowCont').outerHeight();
   lowerRowHt = $(this).parents('.rowCont').next().outerHeight();
   $(this).parents('.rowCont').animate({'top': '+=' + lowerRowHt + 'px'});
   $(this).parents('.rowCont').next().animate({'top': '-=' + thisRowHt + 'px'});
   return false;
});

Answer 1

您也应该交换DOM中的元素，因为当您为HTML元素设置动画时，它们只是在屏幕上更改它们的位置。

我已经完成了你的剧本：

$('.editUp', this).click(function() {

    var this_rowCont = $(this).parents('.rowCont');
    var prev_rowCont = $(this).parents('.rowCont').prev();

    // if this is the first element, it returns
    if (prev_rowCont.length != 1){return false;}

    thisRowHt = this_rowCont.outerHeight();
    upperRowHt = prev_rowCont.outerHeight();

    this_rowCont.animate({'top': '-=' + thisRowHt + 'px'});
    prev_rowCont.animate({'top': '+=' + upperRowHt + 'px'}, function(){

        // this is a callback function which is called, when the animation ends
        // This swap this and previous element in the DOM
        this_rowCont.insertBefore(prev_rowCont);
        this_rowCont.css("top", 0);
        prev_rowCont.css("top", 0);
    });

    return false;
});

$('.editDown', this).click(function() {

    var this_rowCont = $(this).parents('.rowCont');
    var next_rowCont = $(this).parents('.rowCont').next();

    // if this is the last element, it returns
    if (next_rowCont.length != 1){return false;}

    thisRowHt = this_rowCont.outerHeight();
    lowerRowHt = next_rowCont.outerHeight();

    this_rowCont.animate({'top': '+=' + lowerRowHt + 'px'});
    next_rowCont.animate({'top': '-=' + thisRowHt + 'px'}, function(){

        // This swap this and next element in the DOM
        next_rowCont.insertBefore(this_rowCont);
        this_rowCont.css("top", 0);
        next_rowCont.css("top", 0);
    });

   return false;
});

您可以在此处看到它：Animate div up and down

jQuery Animate在堆栈中上下分组

1 个答案: