Unable to make an element move diagonally with jQuery animate()

StackOverflow https://stackoverflow.com/questions/13183759

質問

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.

役に立ちましたか？

解決

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>

他のヒント

You missed $(document) in the line

$document.ready(function(){

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

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/

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top