動畫加載圖標不動畫jquery顯示

Question

我不知道我是否正確地做到這一點。 我有這段代碼。在CSS加載DIV是顯示：無。 所以當我點擊李，loadingDIV顯示和窗體被調用，但動畫GIF不動畫。如果我設置了顯示屏：爲了確保屏蔽效果，它會按照您所期望的那樣進行動畫處理，但當然我希望隱藏該直到點擊的div。有一個更好的方法嗎？

$(function() { 
     $(".tc-group-li").live("click", function(event){ 
      var $item = $(this), 
       $target = $(event.target); 

      $('.loadingDiv', $item).show(); 
      $('.tc-group-name', $item).html(''); 
      $('#gid').val($item.attr('id')); 
      $('#tc-form').submit(); 
     }); 
    }); 

<li class="tc-group-li" id="<%=TcGroupDesc.getID(x)%>" > 
    <div class="loadingDiv">&nbsp;</div> 
    <div class='tc-group-name'> 
     <%=TcGroupDesc.getGroupName(x)%> 
    </div> 
</li> 

Answer 1

在加載div內放置一個動畫gif。我假設你正在使用背景圖片。

<div class="loadingDiv"><img src="loading.gif" alt="loading" /></div>

更新

.loadingDiv img {display:none} 

<div class="loadingDiv"> 
<img src="loading.gif" class="load1" alt="loading" /> 
<img src="loading.gif" class="load2" alt="loading" /> 
<img src="loading.gif" class="load3" alt="loading" /> 
</div> 

$('.loadingDiv img.load1', $item).show(); // $('.loadingDiv img.load1', $item).show().parent().show(); 
$('.loadingDiv', $item).show(); 

或

<div class="loadingDiv"> 
<img src="loading.gif" class="loading" alt="loading" /> 

</div> 

$('.loadingDiv img', $item).attr('src', 'loading2.gif'); 
$('.loadingDiv', $item).show(); 

Answer 2

你可以嘗試使用.fadeOut()和.fadeIn()代替.show（）和.hide的（）。