データが返されるまでAjaxディビジョンとショーローダーディビジョンを非表示にします。

Question

Ajaxによって読み込まれるdivが返されるまでローダーdivを表示しようとしています。だから、Ajaxデータが入力されるまで、divの "responseDiv"を隠したいと思っています。その間に、loader divを表示したいと思います。 私のCSS

#loading { 
    background: url('images/loading.gif') no-repeat center center; 
    position: absolute; 
    display: block; 
    /*top: 0%; 
    left : 0%;*/ 
    background-color : #ffffff ; 
} 

#responseDivOverlay { 
position: absolute; 
background-color : #ffffff ; 
display: block; 
opacity: 0.7; 
background-color: #fff; 
z-index: 99; 
text-align: center; 
} 

私の二つのdiv

<div id="loading"></div> 
<div id="responseDiv"> 

私はJavaScript

私はのgetMessageは、応答のdiv内のデータを読み込まれるまで、ローダーを表示しようとしています。

<!-- Slider Code--> 
     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
     <link rel="stylesheet" href="/resources/demos/style.css"> 
     <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
     <script> 
      $(function() { 
       $("#slider-range").slider({ 
        range: true, 
        min: <%=lowestPrice%>, 
        max: <%=highPrice%>, 
        step: 0.01, 
        values: [<%=lowestPrice%>, <%=highPrice%>], 
        stop: function (event, ui) { 
         //alert(ui.values[0] + "-" + ui.values[1]); 

         // HERE, WHAT I HAVE BEEN TRYING SO FAR 

         //setTimeout(function() { 
         //  document.getElementById("responseDiv").style.display='hide'; 
         //}, 1000); 

         getMessage("1", ui.values[0], ui.values[1]); 

        }, 
        slide: function (event, ui) { 
         $("#amount").val("£" + parseFloat(Math.round(ui.values[0] * 100)/100).toFixed(2) + " - £" + parseFloat(Math.round(ui.values[1] * 100)/100).toFixed(2)); 
         //$("#amount").val("£" + ui.values[0] + " - £" + ui.values[1]); 
         //parseFloat(Math.round(num3 * 100)/100).toFixed(2); 
        } 

       }); 
       $("#amount").val("£" + $("#slider-range").slider("values", 0) + 
      " - £" + $("#slider-range").slider("values", 1)); 

      }); 
     </script> 

Answer 1

あなたが「responseDiv」を使用してCSS（表示：なし）を隠さないのはなぜあり、変更AJAXのロードが終了したら、それはjQueryのを使用して状態ですか？

Answer 2

cssセレクタを使用してdivの表示を変更できます。 非表示にする： $（ "＃MyDivId"）。display = none; を表示する： $（ "＃MyDivId"）。display = block;