JQuery：ページロードで一度だけフェードインを実行

Question

私は、更新されたデータをチェックして表示するためにJQueryを使ってdivsを10秒ごとにリフレッシュするいくつかのdivを持っています。 1つの小さな例外を除いて、すべてがうまくいきます。ページが最初にロードされると、タイマーが10秒に設定されてから特定のdivにデータが表示されるまでに10秒かかってからポップアップします。それはむしろ荒く見える。だから、私がやろうとしているのは、最初の読み込み時にそのデータが消えることです。ページが最初に読み込まれたときだけ必要になります。そうしないと、10秒ごとに消えてしまいます。私はJQueryを非常に新しくしており、私が探しているものを見つけることができませんでした。では、ページが最初にロードされたときに、データを一度だけフェードインする方法はありますか？

ここでは、データをどのようにリフレッシュするかのスクリプトの例を示します。

function auto_load(){ 
     $.ajax({ 
      url: "inc/location_status.php", 
      cache: false, 
      success: function(data){ 
      $("#locationNotify").html(data); 
      } 
     }); 
} 

$(document).ready(function(){ 

auto_load(); //Call auto_load() function when DOM is Ready 

}); 

//Refresh auto_load() function after 10000 milliseconds 
setInterval(auto_load,10000); 

たとえば、データを表示するHTMLでは、このようなことをします。

<div id="locationNotify"></div> 

ここでEDIT

は、私はそれがフェードイン作られてきた方法の例である。この方法の問題は、div要素は、それがフェードイン更新/リフレッシュされるたびにある。私が持ってしようとしていますこれは一度フェードインする場所で、ページが最初に読み込まれるときです。追加できるストップイベントはありますか？ページロード時に一度フェードインするだけで、スクリプトが10秒ごとにdivを更新/更新するたびにフェードインすることはありません。

function auto_load(){ 
     $.ajax({ 
      url: "inc/location_status.php", 
      cache: false, 
      success: function(data){ 
      $("#locationNotify").html(data).hide().delay().fadeIn(500); 
      } 
     }); 
} 

Answer 1

これはあなたが望む方向にあなたを導くのに役立つはずです。準備の

/* Set Anonymous Function */ 
 
(function autoLoad(fadeIn) { 
 
    /* Set Testing Post ID */ 
 
    var postId = Math.floor(Math.random() * 100); 
 
    
 
    /* Call Ajax */ 
 
    $.ajax({ 
 
     url: '//jsonplaceholder.typicode.com/comments/' + postId, 
 
     cache: false, 
 
     success: function(data) { 
 
      $('#locationNotify').html(data.name); 
 
      if(fadeIn) { 
 
       $('#locationNotify').hide().delay().fadeIn(500); 
 
      } 
 
     } 
 
    }); 
 
    
 
    /* Set Tiemout */ 
 
    setTimeout(function() { 
 
     autoLoad(false); 
 
    }, 10 * 1000); 
 
}(true));

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="locationNotify" class="alert alert-danger text-center" style="display:none"></div>