Jump to content

jQuery Animate


brooke_theperson
 Share

Recommended Posts

Hey, so I have this simple jQuery function,but it is not working. When I click the div with the class "buttonup", the div with the class "thing" doesn't move. Can anyone tell me why this won't work?

 

$(document).ready(function(){    $('.buttonup').click(function(){        $('.thing').animate({left: '+=10px'}, 500);    });});
Link to comment
Share on other sites

'+=10px' is a perfectly valid jquery value, it moves the div 10px further to right with every click, using '10px' just moves it right by 10px and no more.

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />        <title>Document Title</title>        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>        <script type="text/javascript">               $(document).ready(function() {                    $('.buttonup').click(function() {                        $('.thing').animate({left: '+=10px'}, 500);                    });                });            }        </script>        <style type="text/css">           .thing {position: absolute; height: 200px; width: 200px; background-color: red; left: 0; top: 600px;}       </style>    </head>    <body>        <div class="thing"></div>        <input type="button" class="buttonup" value="press me">    </body></html>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...