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

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

2 个答案: