I actually have a JSP page with this basic HTML elements;

2. <div style="display:none;" id="loadingBar"><img src="images/loading-big.gif" alt="loading"/> </div>
3.                 <div style="display:none;" id="result"></div>

and then the JQUERY with these source code;

2. var content;
3. var dataString = "ha";
4. 
   
5. $( function() {
6. 
   
7.     $.validator.addMethod("username", function(value, element) {
8.         return this.optional(element) || /^[a-z0-9\_]+$/i.test(value);
9.     }, "UserID: only letters, numbers, or underscore.");
10. 
    
11.     $('#userAccountForm').validate();
12. 
    
13.     $('input').focus( function() {
14.         content = $(this).val();
15.         if(content=='- none -') {
16.             $(this).val("");
17.         }
18.     } );
19.     
20.     $('input').blur( function() {
21.         content = $(this).val();
22.         if(content=='') {
23.             $(this).val("- none -");
24.         }
25.     } );
26. 
    
27.     $('.tableModifierButton input:submit').click( function(){
28. 
    
29.         var emptyThing = "- none -";
30. 
    
31.         // ensure all fields are not empty
32.         // we use word - none - as empty field
33.         var usName = $('#username').val();
34.         var email = $('#email').val();
35.         var contc = $('#mobilephone').val();
36.         //    var photo = $('#avatar').val();
37.         var usId = $('#userid').val();
38.         var pass = $('#password').val();
39.         var editClient = $('input:radio[name=editClient]:checked').val();
40.         var addClient = $('input:radio[name=addClient]:checked').val();
41.         var delClient = $('input:radio[name=deleteClient]:checked').val();
42.         var adminPriv = $('input:radio[name=adminPriv]:checked').val();
43. 
    
44.         if(adminPriv==undefined){
45.             adminPriv = "staff";
46.         } else {
47.             adminPriv = "administrator";
48.         }
49. 
    
50.         if(usName==emptyThing){
51.             usName = "none";
52.         }
53.         if(contc==emptyThing){
54.             contc = "0";
55.         }
56.         if(pass==emptyThing){
57.             pass = "default";
58.         }
59. 
    
60.         dataString = 'username='+usName+"&contact="+contc+"&email="+email+"&userid="+usId+"&password="+pass+"&editclient="+editClient+"&addclient="+addClient+"&deleteclient="+delClient+"&adminprivillege="+adminPriv;
61.         
62.         $('#userAccountForm').fadeOut(1000, function(){
63.             $('#loadingBar').fadeIn(300);
64.         } );
65. 
    
66.         var options = {
67.             type: "POST",
68.             url: "user-form-function",
69.             data: dataString,
70.             success: function(msg){
71. 
    
72.                 $('#result').html(msg).fadeIn("slow");
73.                   $('#loadingBar').fadeOut("slow");
74.             }
75.         };
76. 
    
77.         $.ajax( options );
78. 
    
79.         return false;
80.         
81.     } );
82. 
    
83. } );
84. 
    
85. 
    

Strangely is... the  loadingBar FadeIn effect come nicely.

But when at line 73; when It reached success call, it never fading out.

1.                   $('#loadingBar').fadeOut("slow");

is this line not working when it came into success portion or.... there's something wrong with my source code? I confused ....