javascript - 将图像从一个 div 动画到另一个

Question

我的代码中有两个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>

提前致谢

Answer 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')正在寻找( ) 的userimage内部。$(this).animationButton

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

Answer 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' />");
        });
    });