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 simple diagonal move animation.

I'm still extremely new to JQuery (as in, started today) but from everything i understand, the following code should work. What error am i making?

<head>
<script type="text/javascript" src="JQuery.js">
</script>

<script>
$(document).ready(function(){
    $("#moveme").click(function(event){
    $("#moveme").animate({right: '+=50', bottom: '+=50'}, 1000); 
    });
});
</script>
</head>

<body>
<div id="moveme">
Move this text
</div>
</body>

Edit:

Added relative property from css and fixed parenthesis issue with document but still not working.

回答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:

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

回答2:

You missed $(document) in the line

$document.ready(function(){

回答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;
}

回答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/

来源：https://stackoverflow.com/questions/13183759/unable-to-make-an-element-move-diagonally-with-jquery-animate

标签

javascript

jquery

html

dom

script-tag