StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strong>UPDATED</strong>: Try the code now, it shows the arrow in a green box contained on a red box and a click in the red box will grow and shrink the arrow compensating movement. Of course the boxes are for display purposes only you can remove the borders from the css.</p> <p>The arrow was not moving anyway, the effect was because the image you provided has a blank space around the arrow which of course it also grow. You can clip the image to avoid having to compensate movement but anyway, the example illustrates that other properties can be also animated. </p> <p>You just need to play a bit with the parameters to get the effect you are after.</p> <pre><code><html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"> </script> <script> $(document).ready(function() { $('.arrow_container').click(function() { $('img.arrow').animate({ width: '+=70', height: '+=70', left: '-=15', top: '-=10' }); $('img.arrow').animate({ width: '-=70', height: '-=70', left: '+=15', top: '+=10' }); }); }); </script> <style> .arrow_container { margin-left:30px; margin-top:30px; width:100px; height:100px; border: 1px solid red; } .arrow { position:absolute; width:30; height:30; border: 1px solid green; } </style> </head> <body> <div class="arrow_container"> <img class="arrow" src="http://img687.imageshack.us/img687/9180/pngqa.png"> </div> </body> </html> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload