Jquery ajax gif

Jquery ajax gif

I'm doing this: when user select a state from a selectbox, then the city's selectbox is update by ajax. It works just fine...
I'd like to show a gif image while the ajax request is being made. Well, that's I managed to do.
However, now I'd like to hide the city's selectbox and show the gif in its place while the resquest is being made, and when it's done, I'd hide the gif and show the city's selectbox.
How can I do that?
I tried the following, but it isn't work.
  1. <div class="spinner">&nbsp;</div>
      <div class="city">
        City <span id="city"></span>
      </div>


  1. initial_state_id = $("#user_state_id").val();
       city = $("#idcity").val();
       $.ajax({
         type: "POST",
         url: "/states/city_list",
         data: "state_id="+initial_state_id+"&city_id="+city,
         beforeSend:function(){
          $(".city").addClass("hide");
          $(".spinner").show();
          },
         success: function(html){
           $("#city").html(html);
           $(".spinner").hide();
           $(".city").removeClass("hide");
         }
       });














  1. div.spinner{
        background-image: url(/images/spinner.gif);
        background-repeat:no-repeat;
        display:none;
    }
    .city .hide{
        display:none;
    }
    .city {
        display:inline-block;
    }