javascript - 如何使用 jquery 移动按钮并通过效果/动画方法查看它？

Question

通常，当我想在jquery中产生某种效果时，我会获取所需的元素，将其淡出并使用appendto()，insertbefore()，insertafter()...并在元素的新位置淡入淡出.

我已经研究了一段时间，但一直无法找到如何做这个 Action 并看到它的实际效果(视觉上)。我知道 jquery 中包含的 animate 函数，但我不知道如何实际附加我移动到新容器 div 的 elment。

示例:我想将按钮从一个容器 div 移动到另一个容器 div，并且我想看到这一移动的实际效果。请记住，当元素落在新容器 div 中时，它必须位于该容器内部，而不仅仅是位于 DOM 中所需的位置。

谢谢

Answer 1

感谢@Frédéric Hamidi，我能够解决这个问题。这是我的解决方案:

我的页面上有一个上传处理程序，在上传图像之前，我使用 fadeto 函数显示该图像的预览。在这个 fadeto 函数内部，我创建了一个 animate 函数，它给了我想要的结果。

$("#fileImageContainer").fadeTo(500, 1, function() {
    var btnPosition = $(".uploadBtn").offset();
    var imgPosition = $("#fileImageContainer").offset();
    //imgPosition.left += $("#fileImageContainer img ").width();
    imgPosition.top += $("#fileImageContainer img").height() + 30;
    $(".uploadBtn").animate({
        "left": "+=" + (55 + imgPosition.left - btnPosition.left).toString() + "px",
        "top": "+=" + (imgPosition.top - btnPosition.top).toString() + "px"
    }, {
        duration: 1500,
        complete: function() {
            $(".uploadBtn").removeClass("detachElement");
            $(".uploadBtn").appendTo("#fileImageContainer")
            $(".uploadBtn").text("Add new");
        }
    });
});