使用jQuery淡入淡出

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()

UPDATE

$(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(){ 
 
      \t $(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>