將圖像動畫化爲鼠標位置點擊

我正在嘗試使用JQuery將圖像動畫到點擊鼠標的位置。將圖像動畫化爲鼠標位置點擊

html的div有一個「stage」的id，圖像的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它上面的標題應該改變，並且圖像應該移動到人點擊在舞臺上的位置。

來源

2012-09-26 ZAX

聽起來像一個遊戲..你有沒有想過碰撞？ –

我猜它應該像[這個FIDDLE]（http://jsfiddle.net/yTBva/）...？ – adeneo

兩件事情：

$('#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-26 22:26:41 Shmiddty

將圖像動畫化爲鼠標位置點擊

回答

相關問題