Search code examples
javascriptjqueryhtmldomscript-tag

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.

Solution

  • 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>