CODEWITHSUNDEEP
javascriptjquery
randy
randy

Reputation: 1877

animated loading icon not animating on jquery show

I am not sure i am doing this correctly. i have this snippet of code. in the css loadingDiv is display:none. so when i click on the li, the loadingDiv shows and the form is called, but the animated gif doesn't animate. if i set the display: to block just to make sure , it animates as you would expect but of course i want that div hidden until the click. Is there a better way to do this?

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

Upvotes: 0

Views: 376

Answers (2)

lucuma
lucuma

Reputation: 18339

Place an animated gif inside of the loading div. I assume you are using a background image.

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

Update

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

or

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

</div>

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

Upvotes: 1

Robin Castlin
Robin Castlin

Reputation: 10996

You could try using .fadeOut() and .fadeIn() instead of .show() and .hide().

Upvotes: 0

Related Questions