2015-10-21 155 views
0

當複選框被選中時,表格從右側滑動,而當複選框未被選中時,表格從左到右。如何讓它從上到下或從下到上滑動?使用jQuery淡入淡出

$(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/

+0

可以在http://jsfiddle.net中顯示此代碼的工作示例嗎?我看不出有什麼理由讓這個代碼做任何事情? –

+0

如果您觀察'$('#tbdata')。show(2500);',這裏的延遲導致了表格。你可以忽略其餘的代碼。 –

回答

0

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

+0

我只想滑動表格'$('#tbdata')。show(2500);'而不是加載跳躍。 –

+0

好吧,我添加一個幻燈片的頂部功能 –