动画加载图标在 jquery 显示上没有动画

animated loading icon not animating on jquery show

本文关键字：动画 显示 jquery 加载 图标      更新时间：2023-09-26

我不确定我是否正确执行此操作。我有这段代码。在 css 加载中，Div 是 display：none。因此，当我单击 li 时，将显示 loadDiv 并调用表单，但动画 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>
在

加载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();

你可以尝试使用 .fadeOut（） 和 .fadeIn（） 而不是 .show（） 和 .hide（）。

相关文章：