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 Link to comment https://forums.phpfreaks.com/topic/219322-jquery-sliding-a-table-row-up/ 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> Link to comment https://forums.phpfreaks.com/topic/219322-jquery-sliding-a-table-row-up/#findComment-1138116 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.