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

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

Frage

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.

War es hilfreich?

Lösung

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>

Andere Tipps

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/

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top