使用JQuery使用FadeIn向下滑动

Question

选中复选框时，表格从右滑动；如果取消选中复选框，则表格从左向右滑动。 如何使其从上到下或从上到下滑动？

$(document).ready(function () {
    $('input[type="checkbox"]').click(function () {    
        if ($(this).prop("checked") == true) {
            $('#loaddiv').fadeIn('slow', function () {
                $(this).delay(2000).fadeOut('slow');                    
            });
            $('#tbdata').hide(2500);//this code casing slide from right to left
        }
        else if ($(this).prop("checked") == false) {
            $('#loaddiv').fadeIn('slow', function () {
                $(this).delay(2000).fadeOut('slow');
            });
            $('#tbdata').show(2500);// this code causing slide from right to left
        }
    });
});

检查herer http://jsfiddle.net/z7rgsduv/

Answer 1

您可以使用slideUp()和slideDown()

更新

 $(document).ready(function () { $('input[type="checkbox"]').click(function () { if ($(this).prop("checked") == true) { $('#loaddiv').fadeIn('slow', function () { $(this).delay(2000).fadeOut('slow'); }); $('#tbdata').show(); $('#tbdata').animate({top:0}) } else if ($(this).prop("checked") == false) { $('#loaddiv').fadeIn('slow', function () { $(this).delay(2000).fadeOut('slow'); }); $('#tbdata').animate({top:-25},function(){ $(this).hide() }) } }); }); 

 #tbdata{ position:relative; top:-25px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="form1" runat="server"> <div id ="divloading" style="width:100%; height:100%"> <img id="loaddiv" src="http://www.degruyterfabriek.nl/wp-content/uploads/2013/12/DGF_Redactie.jpg" style="width:200px" /> <div id="div1" style="width:100%; height:100%; overflow:hidden"> <table id="tbdata" > <tr> <th>First Name</th> <th>Last Name</th> <th>Company</th> </tr> </table> <p><input type="checkbox" />Click to hide details</p> </div> </div> </form>