JQuery Div not animating in click function

Question

Hi Everyone!

I have the following code, I am attempting to have a div animate on a click event, but for some reason the div is immediately moving to the location and it's not animating to the coordinates specified, what am I doing wrong here? code:

  $(document).ready(function() {
    $('#example1').click(function(e){
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        $('#example1-xy').html("X: " + x + " Y: " + y);
        var leftOfShip = x;                                              
        //var leftOfShip = document.getElementById("ship").style.left + 20;
        $("#ship").animate({left: $("#ship").css("left",leftOfShip)},5000);
    });
  });

Any Advice would be of help!!

Answer 1

You're miscalling animate.

Change it to

$("#ship").animate({ left: leftOfShip }, 5000);

Answer 2

I think the animate function only works on the "number" parameter.

The following:

$("#ship").animate({left: $("#ship").css("left",leftOfShip)},5000);

should be:

$("#ship").animate({left: "500px", 5000); 

Answer 3

The problem is your animate call:

$("#ship").animate({left: $("#ship").css("left",leftOfShip)},5000);

needs to become:

$("#ship").animate({left: leftOfShip}), 5000);

you can play with some of the code at http://www.jsfiddle.net/7yNM4/ in a very simple mock up.