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
        }
    });
});

查看此处http://jsfiddle.net/z7rgsduv/

Answer 1

您可以使用$(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>

{{1}}

{{1}}

使用JQuery向下滑动fadeIn

1 个答案: