Unable To Make An Element Move Diagonally With Jquery Animate()

Alright so I only need to learn JQuery for a couple of animations on a site I'm building. I've been reading the tutorials on the JQuery site and am just trying to implement a simp

Solution 1:

It seems that you forgot some parenthesis to select the elements correctly.

What about that?

$(document).ready(function(){
    $("#moveme").click(function(event){
        $(this).animate({right: '+=50', bottom: '+=50'}, 1000);​​​​​​​​​​​​​​​ 
    });
});

Edit:

Also, make sure that you are importing the jQuery script library:

<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Solution 2:

You missed $(document) in the line

$document.ready(function(){

Solution 3:

Also your jquery animate function is changing CSS of your id="moveme"

i'd make sure that in your css you have this.

#id {
    position: relative;
}

Solution 4:

You can definitely do this:

$(document).ready(function(){
    $("#moveme").click(function(event){
      $(this).animate({'margin-left': '+=50', 'margin-top': '+=50'}, 1000); 
    });
});​

Working demo here (just click on the div saying 'hello'): http://jsfiddle.net/px2jz/