動畫從一個div到另一個div

Question

我的代碼中有兩個div標簽。 一個div包含200×200尺寸的圖像。 另一個div不包含任何內容。 我想將此200 x 200圖像設置為30 x 30圖像的空div的動畫。 我寫了代碼，但是沒有用。 即使在螢火蟲中也沒有顯示任何錯誤。 誰能幫我嗎？

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