On changing the select option i am displaying the image and on success of ajax call hiding that image .. but this happens very fast .. i want to display the image for some time say 2 seconds. how to do it

my code

 var div_id = $(this).closest('tr').find('.display_image').attr("id");
 $("#"+div_id).empty().html('<img src="${resource(dir:'images',file:'spinner.gif')}"/>');
 $("#"+div_id).show();

  $.ajax({
                type: "POST",
                url:"${createLink(controller:'s2PublicLifecycle',action:'UpdateField')}",
                data: dataString,
                success: function() {
                  $("#"+div_id).hide();
                }
              }); 

On changing the select option i am displaying the image and on success of ajax call hiding that image .. but this happens very fast .. i want to display the image for some time say 2 seconds. how to do it

my code

 var div_id = $(this).closest('tr').find('.display_image').attr("id");
 $("#"+div_id).empty().html('<img src="${resource(dir:'images',file:'spinner.gif')}"/>');
 $("#"+div_id).show();

  $.ajax({
                type: "POST",
                url:"${createLink(controller:'s2PublicLifecycle',action:'UpdateField')}",
                data: dataString,
                success: function() {
                  $("#"+div_id).hide();
                }
              }); 

• javascript
• jquery
• jquery-ui

2 Answers 2

use jquery delay:

$("#"+div_id).delay(2000).hide(1);

Here's a jsfiddle

try setTimeout(function() { $("#"+div_id).hide(); }, 2000 );