1

JQueryを使用して、div上でマウスをクリックするポイントまで画像をアニメーション化しようとしています。

htmlのdivのIDは「stage」で、画像のIDは「player」です。ユーザーがステージをクリックしたときにヘッダーを更新することに成功しましたが、他のJQueryを追加して、画像をステージ上のマウスクリックに移動させると、どちらも機能しません。

私はJQueryを初めて使用するので、おそらくそれは明らかなことですが、誰かが私のエラーを見つけられることを願っています。

JQueryのコードは次のとおりです。

$(document).ready(function(){
//alert('It works');
    $('#stage').click(function() {
        $('#header').html('Image is moving!');
    });

    $('#stage').click(function(e){
        $('#player').animate({
            top: e.pageY + 'px';
            left: e.pageX + 'px';
         }, 800);
    });
});

要約すると、誰かがステージdivをクリックすると、その上のヘッダーが変更され、画像はその人がステージをクリックした場所に移動するはずです。

4

1 に答える 1

5

2つのこと：

$('#player').animate({
    top: e.pageY + 'px';
    left: e.pageX + 'px';
}, 800);

構文エラーがあります。そのはず：

$('#player').animate({
    top: e.pageY,
    left: e.pageX
}, 800);

'px'必要がないので中断したことに注意してください。

ここで動作することがわかります: http://jsfiddle.net/VBzUw/

于 2012-09-26T22:26:41.177 に答える