Question

I am attempting to use JQuery to animate an image to the point where I click my mouse on a div.

The div of the html has an id of “stage” and the image has an id of “player”. I have successfully gotten the header to update when the user clicks on the stage, but once I add in the other JQuery to have the image move to my mouseclick on the stage, neither works.

Perhaps its something obvious since I’m new at JQuery but hopefully someone can spot my error.

Here’s my code for the 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);
    });
});

In summary, when someone clicks in the stage div the header above it should change, and the image should move to where the person clicked on the stage.

Answer 1

Two things:

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

Has syntax errors. It should be:

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

Notice I left off 'px' since it isn’t necessary.

You can see it working here: http://jsfiddle.net/VBzUw/