Demo by jquery-az.com
jQuery, CSS and HTML
<!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script> $(document).ready(function(){ $(".fadeOuttab").click(function(){ $(".table_bg").fadeOut(2000, function(){ alert ("The Table disappeared completely!") }); }); $(".fadeIntab").click(function(){ $(".table_bg").fadeIn(3000, function(){ alert ("The Table is visible!") }); }); }); </script> <style> .table_bg { width:40%; font-family:verdana; font-size:15px; color:#fff; padding: 10px; text-align:center; } .table_bg th{ background: linear-gradient(to right, #E9DC94, #3C514D, #4E7898); color: #fff; line-height:35px; } .table_bg td{ background: #D0E8AC; padding:10px; color: #000; } </style> </head> <body> <p> <button class="fadeIntab">fadeIn HTML Table</button> <button class="fadeOuttab">fadeOut HTML Table</button> </p> <table class="table_bg"> <tr> <th>Name</th> <th>Age</th> <th>Salary</th> </tr> <tr> <td>Jim</td> <td>35</td> <td>$5000.00</td> </tr> <tr> <td>Anna</td> <td>24</td> <td>$3500.00</td> </tr> <tr> <td>Adams</td> <td>31</td> <td>$4000.00</td> </tr> <tr> <td>Adams</td> <td>31</td> <td>$4000.00</td> </tr> <tr> <td>Adams</td> <td>31</td> <td>$4000.00</td> </tr> </table> </body> </html>
fadeIn HTML Table
fadeOut HTML Table
Name
Age
Salary
Jim
35
$5000.00
Anna
24
$3500.00
Adams
31
$4000.00
Adams
31
$4000.00
Adams
31
$4000.00