<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait"> <div class="container" style="font-family: 'Strait', sans-serif;"> <div class="row"> <center><h3 style="width:50%;background-color:yellow" id="baslik">table list items effect</h3></center> <button type="button" id="sbutton" style="margin-bottom:7px;" class="btn btn-primary btn-lg btn-block">Tıkla</button> <table id="zamMakListe" class="table" style="width: 100%"> <thead id="tthead"> <tr style="background-color:#000;"> <td style="width: 20%"> <h5 class="pull-right" style="color:#fff;"><b>Yıl</b></h5> </td> <td style="width: 40%"> <h5 class="pull-right" style="color:#fff;"><b>Aylık</b></h5> </td> <td style="width: 40%"> <h5 class="pull-right" style="color:#fff;margin-right: 15px;"><b>Rezerv</b></h5> </td> </tr> </thead> <tbody id="ttbody" style="100%"> <tr><td style="width: 20%;"><h5 class="pull-right" style="color:#000;"><b>1 - 2024</b></h5></td><td style="width: 40%"><h5 class="pull-right" style="color:#000;"><b>11111.1</b></h5></td><td style="width: 40%"><h5 class="pull-right" style="color:#000;margin-right: 15px;"><b>888888.8</b></h5></td></tr> <tr><td style="width: 20%;"><h5 class="pull-right" style="color:#000;"><b>2 - 2025</b></h5></td><td style="width: 40%"><h5 class="pull-right" style="color:#000;"><b>11112.1</b></h5></td><td style="width: 40%"><h5 class="pull-right" style="color:#000;margin-right: 15px;"><b>888889.8</b></h5></td></tr> <tr><td style="width: 20%;"><h5 class="pull-right" style="color:#000;"><b>3 - 2026</b></h5></td><td style="width: 40%"><h5 class="pull-right" style="color:#000;"><b>11113.1</b></h5></td><td style="width: 40%"><h5 class="pull-right" style="color:#000;margin-right: 15px;"><b>888890.8</b></h5></td></tr> <tr><td style="width: 20%;"><h5 class="pull-right" style="color:#000;"><b>4 - 2027</b></h5></td><td style="width: 40%"><h5 class="pull-right" style="color:#000;"><b>11114.1</b></h5></td><td style="width: 40%"><h5 class="pull-right" style="color:#000;margin-right: 15px;"><b>888891.8</b></h5></td></tr> <tr><td style="width: 20%;"><h5 class="pull-right" style="color:#000;"><b>5 - 2028</b></h5></td><td style="width: 40%"><h5 class="pull-right" style="color:#000;"><b>11115.1</b></h5></td><td style="width: 40%"><h5 class="pull-right" style="color:#000;margin-right: 15px;"><b>888892.8</b></h5></td></tr> <tr><td style="width: 20%;"><h5 class="pull-right" style="color:#000;"><b>6 - 2029</b></h5></td><td style="width: 40%"><h5 class="pull-right" style="color:#000;"><b>11116.1</b></h5></td><td style="width: 40%"><h5 class="pull-right" style="color:#000;margin-right: 15px;"><b>888893.8</b></h5></td></tr> <tr><td style="width: 20%;"><h5 class="pull-right" style="color:#000;"><b>7 - 2030</b></h5></td><td style="width: 40%"><h5 class="pull-right" style="color:#000;"><b>11117.1</b></h5></td><td style="width: 40%"><h5 class="pull-right" style="color:#000;margin-right: 15px;"><b>888894.8</b></h5></td></tr> <tr><td style="width: 20%;"><h5 class="pull-right" style="color:#000;"><b>8 - 2031</b></h5></td><td style="width: 40%"><h5 class="pull-right" style="color:#000;"><b>11118.1</b></h5></td><td style="width: 40%"><h5 class="pull-right" style="color:#000;margin-right: 15px;"><b>888895.8</b></h5></td></tr> </tbody> <tfoot id="ttfoot"> <tr style="background-color:#000;"> <td colspan="3" class="h5" style="padding:20px;background-color:#000;color:#fff" ><center><a href="https://muhittinart.blogspot.com/p/contact.html" target="_blank" >@illustratormuhittin</a></center></td> </tr> </tfoot> </table> </div> </div>

@keyframes anim { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); } } tr { transform-origin: top; } td { padding: 10px; } tr.even-row { background-color: #FFCB83; display: table-row; animation: anim 0.5s ease forwards; /* Added 'forwards' */ } tr.odd-row { background-color: #f2f2f2; display: table-row; animation: anim 0.9s ease forwards; /* Added 'forwards' */ } tr:nth-child(even) {background-color: #f2f2f2;} tr:nth-child(odd) {background-color: #FFCB83;} #zamMakListe thead tr:first-child td:first-child { border-top-left-radius: 7px; } #zamMakListe thead tr:first-child td:last-child { border-top-right-radius: 7px; } #zamMakListe tfoot tr:last-child td:first-child { border-bottom-left-radius: 7px; } #zamMakListe tfoot tr:last-child td:last-child { border-bottom-right-radius: 7px; }

$(document).ready(function(){ let isVisible = true; $('#sbutton').on('click', function() { if (isVisible) { $('#tthead, #ttfoot').hide(); $("#ttbody").slideUp("fast"); isVisible = false; $("#baslik").text("hide"); } else { $("#ttbody").slideDown("fast"); isVisible = true; $('#tthead, #ttfoot').show(); $('#ttbody tr').each(function(index) { if (index % 2 === 0) { $(this).addClass('even-row'); } else { $(this).addClass('odd-row'); } }); $("#baslik").text("show"); } }); });