1

コードに 2 つのdivタグがあります。1divつには 200 x 200 のサイズの画像が含まれています。もう一方divには何も含まれていません。divこの 200 x 200 の画像を空の 30 x 30 の画像にアニメーション化したいと考えています。コードを書きましたが、動きません。でも、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>

前もって感謝します

4

2 に答える 2

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 に追加されます。

于 2013-08-15T07:03:49.463 に答える