마우스 위치로 이미지 애니메이션하기

Question

JQuery를 사용하여 div에서 마우스를 클릭하는 지점까지 이미지에 애니메이션을 적용하려고합니다.

html의 div에는 "stage"의 ID가 있고 이미지의 ID는 "player"입니다. 사용자가 무대를 클릭 할 때 업데이트 헤더를 성공적으로 가져 왔지만 다른 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); 
    }); 
}); 

:

여기 JQuery와 내 코드입니다.

Answer 1

두 가지 :

$('#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/