奇妙なコンテンツ行動

Question

点滅は誰にもここで直接スライダの下に三つのボタン/画像セットの点滅動作見ている：http://foodforhealthinternational.com/

を私はそれを毎回表示されていない、それが唯一のChromeで起こっていますしかし、フラッシュは、このスクリプトのsetTimeoutをと同期しているので、それは次のjQueryに関連すると思わ：

function checkForChanges() 
{ 
    if(jQuery("#slider-banner").hasClass('right-partner')) 
    { 
     jQuery("#home-middle-first").css("background-image","url([image path]/turnkey_hover.png)"); 
     jQuery("#home-middle-second").css("background-image","url([image path]/raw_ing_normal.png)"); 
     jQuery("#home-middle-third").css("background-image","url([image path]/copack_normal.png)"); 
    } 
    else if(jQuery("#slider-banner").hasClass('living-nutrients')) 
    { 
     jQuery("#home-middle-second").css("background-image","url([image path]/raw_ing_hover.png)"); 
     jQuery("#home-middle-first").css("background-image","url([image path]/turnkey_normal.png)"); 
     jQuery("#home-middle-third").css("background-image","url([image path]/copack_normal.png)"); 
    } 
    else if(jQuery("#slider-banner").hasClass('with-you')) 
    { 
     jQuery("#home-middle-third").css("background-image","url([image path]/copack_hover.png)"); 
     jQuery("#home-middle-first").css("background-image","url([image path]/turnkey_normal.png)"); 
     jQuery("#home-middle-second").css("background-image","url([image path]/raw_ing_normal.png)"); 
    } 

    setTimeout(checkForChanges, 250); 
} 
jQuery(checkForChanges); 

事は、これは日以上の罰金働いていた、です。これは、他人が追加したいくつかのプラグイン（これはWordPress内にあります）と連動して開始されている可能性があります。

とにかく、私は解決のために懸命に掘ると任意のフィードバックをいただければ幸いです。

ありがとうございます！

UPDATE：

私は実際のコードで[やっもの]を置き換えました。基本的には、上のスライダーに表示される3つのクラスのうちの1つを探していて、そのクラスに基づいて下のIDの背景イメージを変更します。

UPDATE 2：

以下のアドバイスを受けた後、私は、位置決めを操作するのではなく、背景の変更のための新しいイメージを呼び出すために、スクリプトを働きました。また、私はそれぞれの画像をロードするので、これ以上の4分の1秒のタイマー...

は、今では簡単に追加したり、背景画像の位置を変更したクラスを削除するときに関数を呼び出す方法を考え出しました。

function checkForChanges() 
    { 
     if(jQuery("#slider-banner").hasClass('right-partner')) 
     { 
      jQuery("#home-middle-first").addClass("home-middle-hover"); 
      jQuery("#home-middle-second").removeClass("home-middle-hover"); 
      jQuery("#home-middle-third").removeClass("home-middle-hover"); 
     } 
     else if(jQuery("#slider-banner").hasClass('living-nutrients')) 
     { 
      jQuery("#home-middle-second").addClass("home-middle-hover"); 
      jQuery("#home-middle-first").removeClass("home-middle-hover"); 
      jQuery("#home-middle-third").removeClass("home-middle-hover"); 
     } 
     else if(jQuery("#slider-banner").hasClass('with-you')) 
     { 
      jQuery("#home-middle-third").addClass("home-middle-hover"); 
      jQuery("#home-middle-first").removeClass("home-middle-hover"); 
      jQuery("#home-middle-second").removeClass("home-middle-hover"); 
     } 
    } 

私はまだループと変数を使用して、他のアドバイスのいくつかを組み込むしようとしていますが、以下のコードを手直しする私の試みは（jQueryのスキルの私の不足ではなく、コード）、失敗しました。

Answer 1

私はそれを初めて取得できませんでしたが、私はリフレッシュしたときに私がやりました。

これは、私はあなたが競合状態を持っていると思わせます。おそらくスクリプトファイルがロードされるまでにこれを実行するよりも時間がかかり、問題はありませんでした。リフレッシュすると、キャッシュからすべてが引き出され、問題が発生しました。私は確信していません、それはちょうど感傷ですが、それはあなたの断続的な記述と一致しています。

しかし、私は関数の健全性チェックを呼びかけます...毎秒4分の1秒間に、リモートサーバーへのHTTPリクエストによって3つの要素のイメージをロードしています。

しようとしていることを達成するにはいくつかの方法がありますが、実際の画像ではなく、すべての画像を1つのスプライトに配置してからbackground-positionプロパティを更新することをおすすめします。

また、スライドショーのアニメーションでこれを結びつけようとしていることがわかりましたが、それほど正確ではありません。確かに、あなたのスライドショーで何をしているのかは、コールバック関数を使うことができるので、必要に応じてこのアニメーションをトリガーできますか？

Answer 2

背景画像用の新しいソースが同じであれば、おそらくあなたがそれらを変更する前に、チェックする必要があります：

//cache all selections that are used each time `checkForChanges()` runs 
var $banner = jQuery("#slider-banner"), 
    $first = jQuery("#home-middle-first"), 
    $second = jQuery("#home-middle-second"), 
    $third = jQuery("#home-middle-third"), 
    convert = [ 
     { 
      class : 'right-partner', 
      src : ['/turnkey_hover.png', 'raw_ing_normal.png', '/copack_normal.png'] 
     }, 
     { 
      class : 'living-nutrients', 
      src : ['/raw_ing_hover.png', 'turnkey_normal.png', '/copack_normal.png'] 
     }, 
     { 
      class : 'with-you', 
      src : ['/copack_hover.png', '/turnkey_normal.png', '/raw_ing_normal.png'] 
     } 
    ]; 

function checkForChanges() 
{ 
    //iterate through each of the classes to check 
    for (var i = 0; i < 3; i++) { 

     //check if the class at the current index is currently applied to the banner 
     if ($banner.hasClass(convert[i].class)) { 

      //check to see if the background-images are already set to the current index 
      if ($first.css('background-image') != convert[i].src[0]) { 

       //if not then change the background-images 
       $first.css('background-image', convert[i].src[0]); 
       $second.css('background-image', convert[i].src[1]); 
       $third.css('background-image', convert[i].src[2]); 
      } 

      //since we found the class applied to the banner we don't need to run this loop anymore, so stop it 
      break; 
     } 
    } 

    setTimeout(checkForChanges, 250); 
} 
jQuery(checkForChanges); 

を更新

は

ではなく、あなたがやっていたものを見るために私にしばらく時間がかかりました変更のためにページをポーリングする代わりに、スライドショースクリプトのコールバック機能を利用してみてください。

更新

スライドが変更されたときしかし、単一の点滅があり、私はJSコンソールを介して、あなたのサイトに私のJSコードを貼り付け、それが一定の点滅を停止します。