2016-02-26 28 views
0

我有這樣的ASP和HTML代碼:如何使幻燈片動畫JQuery的時候顯示隱藏元素

<asp:Repeater ID="PervousResultsList" runat="server" EnableViewState="False"> 
     <ItemTemplate> 
      <div class="row1"> 
       <table style="cursor: pointer; width: 100%"> 
        <tr> 
         <td rowspan="4"> 
          <asp:Image ID="Image1" ImageUrl="~/Images/pushpinred.png" runat="server" Width="32" 
           Height="32" /></td> 
        </tr> 
        <tr> 
         <td></td> 
         <td></td> 
         <td></td> 
         <td rowspan="7"> 
          <input type="button" class="toggleRow" value="B" style="height: 30px; position: relative; float: left;" /> 
         </td> 
        </tr> 
        <tr> 
         <td>text:</td> 
         <td rowspan="4"> 
          <h1 style="color: gray"><%# Eval("Text") %></h1> 
         </td> 
        </tr> 
        <tr class="hidden"> 
         <td>text:</td> 
         <td><%# Eval("Text") %></td> 
        </tr> 
        <tr class="hidden"> 
         <td>X:</td> 
         <td><%# Eval("Lon") %></td> 
        </tr> 
        <tr class="hidden"> 
         <td>Y:</td> 
         <td><%# Eval("Lat") %></td> 
        </tr> 
        <tr> 
       </table> 
      </div> 
     </ItemTemplate>  
    </asp:Repeater> 

Javascript代碼:

 $('.toggleRow').on('click', function() { 


      $(this).closest('table').find('tr.pointDescArea').hide(300); 
      $(this).closest('table').find('tr.hidden').show(1000); 

      return false; 
     }); 

當與類toggleRow板條點擊jQuery函數以上解僱並顯示定義爲隱藏的行,並隱藏包含類pointDescArea的行。

我的問題是我怎樣才能改變上面的jquery行使用左側的動畫幻燈片(即消失(隱藏),元素將向左滑動,而出現(顯示),它會從右移動到剩下)。

任何想法如何實現它?

+0

你能共享產生的HTML的,而不是服務器端模板 –

+0

http://stackoverflow.com/questions/467336/how-to-use-slidedown-或者出現功能上,一個錶行 –

回答

0
$.fx.speeds.slow = 1500;  // 1.5 sec 
$('.toggleRow').on('click', function() { 
    $(this).closest('table').find('tr.pointDescArea').fadeOut('slow'); 
    $(this).closest('table').find('tr.hidden').fadeIn('slow'); 
    return false; 
}); 

,或者你做直接

$('.toggleRow').on('click', function() { 
    $(this).closest('table').find('tr.pointDescArea').fadeOut(1500); 
    $(this).closest('table').find('tr.hidden').fadeIn(1500); //where 1500 is 1,5 sec 
    return false; 
});