hawkagent Posted November 20, 2010 Share Posted November 20, 2010 Hello, I'm trying to use .slideUp() to smoothly slide up a table row with text and image, however when I do this, the animation looks very sloppy, here you can see what I'm talking about: <html> <head> <title>the title</title> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.pack.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function() { $("#hide").click(function(){ $(".target").slideUp( "slow"); }); $("#show").click(function(){ $(".target").show( "slow"); }); }); </script> <style> p { background-color:#bca; width:200px; border:1px solid green; } div{ width:100px; height:100px; background:red; } </style> </head> <body> <button id="hide"> Hide </button> <button id="show"> Show</button> <table> <tr><td>1</td><td>1</td><td>1</td></tr> <tr ><td>1</td><td>1</td><td>1</td></tr> <tr class="target"><td >1</td><td>1</td><td>1</td></tr> <tr><td>1</td><td>1</td><td>1</td></tr> </table> <div class="target"> </div> </body> </html> If you run this script and press hide, that table columns get out of place before sliding up. Is there any way to fix this? Thanks in advance Quote Link to comment Share on other sites More sharing options...
jimmyt1988 Posted November 22, 2010 Share Posted November 22, 2010 -tr's cannot have widths and heights set. -td's cannot have a height of 0, otherwise they'll collapse into one column. -Best way to do it is to include divs inside each cell... Try this: <html> <head> <title>the title</title> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.pack.js"></script> <script type="text/javascript" language="javascript"> $(document).ready( function(){ $("#hide").click( function(){ $("tr.target td div").slideUp("slow", function(){ //$(this).parent().parent().fadeOut(); }); } ); $("#show").click( function(){ $(".target").show("slow"); } ); } ); </script> <style> p{ background-color:#bca; width:200px; border:1px solid green; } div{ width:auto; height:auto; background:red; } table, td, tr{ } </style> </head> <body> <button id="hide"> Hide </button> <button id="show"> Show</button> <table> <tr><td>1</td><td>1</td><td>1</td></tr> <tr><td>1</td><td>1</td><td>1</td></tr> <tr class="target"><td><div>1</div></td><td><div>1</div></td><td><div>1</div></td></tr> <tr><td>1</td><td>1</td><td>1</td></tr> </table> <div class="target"> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.