brooke_theperson Posted April 26, 2015 Share Posted April 26, 2015 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 More sharing options...
Ingolme Posted April 26, 2015 Share Posted April 26, 2015 "+=10px" isn't a valid CSS value. What are you trying to do? Link to comment Share on other sites More sharing options...
brooke_theperson Posted April 26, 2015 Author Share Posted April 26, 2015 I am trying to make the div move 10px to the right Link to comment Share on other sites More sharing options...
Ingolme Posted April 26, 2015 Share Posted April 26, 2015 This should work as long as the element's position property is set to "relative" $('.thing').animate({left: '10px'}, 500); Link to comment Share on other sites More sharing options...
brooke_theperson Posted April 26, 2015 Author Share Posted April 26, 2015 it still is not working, are you sure the position should be relative? Link to comment Share on other sites More sharing options...
dsonesuk Posted April 26, 2015 Share Posted April 26, 2015 '+=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 More sharing options...
brooke_theperson Posted April 26, 2015 Author Share Posted April 26, 2015 Thank you, this worked when I added those script sources. Link to comment Share on other sites More sharing options...
dsonesuk Posted April 26, 2015 Share Posted April 26, 2015 Well it does help :-) Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now