RichardZ Posted June 7, 2016 Share Posted June 7, 2016 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ var div = $("div"); div.animate({height: '300px', opacity: '0.4'}, "slow"); div.animate({width: '300px', opacity: '0.8'}, "slow"); div.animate({height: '100px', opacity: '0.4'}, "slow"); div.animate({width: '100px', opacity: '0.8'}, "slow"); }); }); </script> </head> <body> <button>Start Animation</button> <p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p> <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div> <div style="background:red;height:50px;width:50px;position:absolute;"></div> </body> </html> Hi All, I've been working through W3 Schools tutorial on jQuery. I worked my way down to the topic on .animate (http://www.w3schools.com/jquery/jquery_animate.asp). For Example 1, of the "Use Queue Functionality", I thought I'd try experimenting with the code, and modified it to add a small red square on top of the large green one (see attached code). I want the red square to change size as the green square changes size, but maintain its size relative to its larger sibling. I can make this happen if I 'ID=' each square and give each the appropriate numeric value, but this isn't exactly flexible/generic. I can use something like '+=100px' and '-=100px', but this clearly adds the same amount to both squares, and naturally the red square doesn't stay relatively sized to the green square. Using something like '*=2.0' just silently fails. Anybody have any suggestions? Thanks, Richard Link to comment Share on other sites More sharing options...
justsomeguy Posted June 7, 2016 Share Posted June 7, 2016 You need to animate both of them individually, or at least start the animations at the same time. Get the current size of each of them and figure out the percent difference, and use that to calculate the new sizes for each of them. Link to comment Share on other sites More sharing options...
RichardZ Posted June 10, 2016 Author Share Posted June 10, 2016 Thanks. I take it then that there is no way to do a percent except manually. I was hoping I could devise a function (perhaps utilizing "this.height"). That, and maybe some concatenation magic (as in " ' " + (this.height*2) + "px'"). But no code wizardry I possible?!? Link to comment Share on other sites More sharing options...
justsomeguy Posted June 10, 2016 Share Posted June 10, 2016 You can try to use a percentage when you call the animate method and see what it does, maybe that will work. 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