将图像从一个 div 动画到另一个答案

【问题标题】：Animate an image from one div to another将图像从一个 div 动画到另一个
【发布时间】：2013-08-15 06:57:45
【问题描述】：

我的代码中有两个div 标签。一个div 包含200 x 200 尺寸的图像。另一个div 不包含任何内容。我想将这个 200 x 200 图像动画到我的空 div 30 x 30 图像。我写了代码，但它不起作用。甚至，它在萤火虫中也没有显示任何错误。谁能帮帮我？？

HTML

<div>
    <img class="userimage" src="images/TF-NKWS-003.png" height="200" width="200" />
</div>

<input type="button" value="Click me to amimate" class="animationButton" />
<br><br><br><br><br><br><br><br>

<div class="addImg">
</div>

Javascript

<script type="text/javascript">

    $(".animationButton").click(function(){
        $(this).find(".userimage").animate({
        left:$(".addImg").offset().left,
        top:$(".addImg").offset().top,
        width:30,
        height:30
        }, 1000, function(){
                 $(".addImg").append("<img src='images/TF-NKWS-003.png' />");
                 });
    });

</script>

提前致谢

【问题讨论】：

标签： javascript jquery animation jquery-animate

【解决方案1】：

那是因为你的选择器是错误的。您的图像不在按钮内。试试这样：

<script type="text/javascript">

    $(".animationButton").click(function(){

        $(".userimage").animate({
            left:$(".addImg").offset().left,
            top:$(".addImg").offset().top,
            width:30,
            height:30
          },1000,function(){
            $(".addImg").append("<img src='images/TF-NKWS-003.png' />");
        });
    });

</script>

您的选择器$(this).find('.userimage') 正在寻找$(this) (.animationButton) 中的userimage。

您的脚本也会复制图像，我不知道这是否是您想要的，如果不是，您应该将$(".addImg").append("<img src='images/TF-NKWS-003.png' />"); 替换为$(this).appendTo(".addImg");。这会将原始图像附加到 div。

【讨论】：

【解决方案2】：

您可以使用固定代码找到jsFiddle：

$(".animationButton").click(function(){
        $(".userimage").animate({
            left:$(".addImg").offset().left,
            top:$(".addImg").offset().top,
            width:30,
            height:30
          },1000,function(){
            $(".addImg").append("<img src='http://placehold.it/80x80&text=image1' />");
        });
    });

【讨论】：