javascript - 传输图像动画jquery

Question

我有两个 div（parentDiv，childDiv）。ParentDiv 包含多个图像，因此当用户单击图像时，它应该将该图像复制到 childDiv 中（这可以使用 jQuery 克隆功能来实现），但我想为复制过程设置动画，例如飞行动画。我试过这个但是

var clonedImg = $("#img").clone().css("position", "absolute").css("opacity","0");
                $("#parent").append(clonedImg);
                clonedImg.animate({ 
                   opacity: 1,
                    top: '+=300'
                }, 5000, function () {
                    $("#child").append(clonedImg);
                });

链接到小提琴

Answer 1

在执行动画之前，必须将克隆的元素添加到 DOM：

  $("#btnTransfer").click(function () {
            var clonedImg = $("#img").clone();
            $("#child").append(clonedImg);
            clonedImg.css("position", "relative").animate({ opacity: 0.25,
                top: '+=50'
            }, 5000, function () {
                clonedImg.css("opacity", "1");
            });
        });

演示：http: //jsfiddle.net/VvCXr/6/