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

Question

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

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。