はDIVのコンテンツを更新した後、私は各PHPページによって生成された別のGoogle Geochartを含む、X DIV（TopRowRight1、TopRowRight2、TopRowRight3 ...）を持って、

Question

おはようの人々[SOLVED]

それをフェードアウト.php？template = X。

 function getResult(template){ 
      jQuery.post("GeochartPerProvince.php?template="+template,function(data) { 
       jQuery("#TopRowRight"+template).html(data); 
      }); 
     } 

     jQuery().ready(function(){ 
      getResult(1); 
      setInterval("getResult(1)",10000); 
      getResult(2); 
      setInterval("getResult(2)",10000); 
      getResult(3); 
      setInterval("getResult(3)",10000); 
     }); 

     jQuery(function() { 

      var $els = $('div[id^=TopRowRight]'), 
       i = 0, 
       len = $els.length; 
       $els.slice(1).hide(); 

      setInterval(function() { 

       $els.eq(i).fadeOut(function() { 

        i = (i + 1) % len 
        $els.eq(i).fadeIn(); 

       }) 

      }, 5000) 

     }); 

5秒ごとにフェードアウトして次のフェードインを行います。これは完全に機能します。 今のところ、DIVのPHPページは10秒ごとに更新されます。これも機能します。

しかし、私が夢見ることは、DIVが10秒ごとではなくフェードアウトした後、DIVのPHPページがリロードされるということです。私は不幸にもそれを行う方法を見つけませんでした。それをどうお勧めしますか？

（私は申し訳ありませんjQueryのに非常に新しいです）

、お読みいただきありがとうございました良い一日持っています。それが正常に動作するか

編集：

 function getResult(template){ 
      jQuery.post("GeochartPerProvince.php?template="+template,function(data) { 
       jQuery("#TopRowRight"+template).html(data); 
      }); 
     } 

     $(document).ready(function(){ 
      getResult(0); 
      getResult(1); 
      getResult(2); 
      //setInterval("getResult(2)",10000); <== keep this piece of code in case of need. 
     }); 

     $(document).ready(function() { 

      var $els = $('div[id^=TopRowRight]'), 
       i = 0, 
       len = $els.length; 
       $els.slice(1).hide(); 

      setInterval(function() { 

       $els.eq(i).fadeOut(function() { 

        i = (i + 1) % len 
        getResult(i); 
        $els.eq(i).fadeIn(); 

       }) 

      }, 10000) 

     }); 

をありがとう！

Answer 1

要素がフェードアウトされた後は、すでにコールバック関数を使用しています。だから、あなたのgetResult機能をその中に呼んでみませんか？

$el.fadeOut(function(){ 
    // stuff 
    getResult(i) 
}) 

Answer 2

あなたが必要なものを達成するために、私はいくつかの提案やサンプルコードを持っている：読みやすい/

$(document).readyを書くための代わりのjQueryの

• 使用$はのための適切な開始点でありますDOM関連の関数
• 一度に1つのdivしか表示されない場合は、divをあまり使わないでください。たいていの場合、1つのdivはコンテンツを交互に/リフレッシュするのに十分です。アニメーションまたはクロスフェードイン/アウトがある場合、2つのdivが必要になります。 （以下の例では2つのdivを使用しています）
• 本当に必要な場合を除き、setIntervalの使用は避けてください。 setTimeoutを使用したロジックは、$ .postのような予期しない遅延を処理しやすくなります。

このようなhtmlコードを何かで開始：

... 
<div class="top-row-right" style="display:block"></div> 
<div class="top-row-right" style="display:none"></div> 
... 

JS：

$(document).ready(function() { 

    var len = 4; // 'I got X DIV..' This is where we put the value of X. 
    var template = -1; 

    function refreshChart() { 

     template = (template + 1) % len; 

     $.post("GeochartPerProvince.php?template="+template, function(data) { 
      var offscreenDiv = ('.top-row-right:hidden'); 
      var onscreenDiv = ('.top-row-right:visible'); 

      offScreenDiv.html(data); 
      onScreenDiv.fadeOut('slow', function() { 
       offScreenDiv.fadeIn(); 
       setTimeout(refreshChart, 10000); 
      }); 

     }); 
    } 
    refreshChart(); 

});