jQuery：AJAX経由でロードされたときに絶対配置された要素でfadeout（）が動作しない

Question

私はページ遷移を達成するために取り組んでいるサイトでAJAXifyを使用しています。

マイコード：

HTML（私はjQueryを使って背景によって退色しています）

<div id="backgrounds"> 
<img src="/assets/Uploads/hpbg3.jpg" alt="" class="bodybackground"> 
<img src="/assets/Uploads/hpbg2.jpg" alt="" class="bodybackground"> 
<img src="/assets/Uploads/hpbg4.jpg" alt="" class="bodybackground"> 
<img src="/assets/Uploads/hpbg5.jpg" alt="" class="bodybackground"> 
</div> 

jQueryの

$('.otherClass').each(function() { 
     $('#backgrounds').fadeOut(function(){ 
       alert('fade'); 
      }); 
}); 

$('#main .container.homepageClass').each(function() { 
     $('#backgrounds').fadeIn(); 
}); 

CSS

#backgrounds {display: none; position: absolute; left: 50%; margin-left: -714px;} 

私のdiv要素が正しくフェードアウトいつ私はAJAXリンクを介してURLにリンクするのではなく、URLを介してページをロードします（アラートを取得します）。ただし、AJAXifiedナビゲーションを使用してリンクすると、フェードは発生しません。この関数はfadeOut（）が確実に起動しています。

CSSから絶対配置を削除し、AJAX経由でページにリンクすると、私のdivは必要に応じてフェードアウトします（警告が表示されます）。それはdivの絶対的な位置付けに問題を引き起こしているように思えるだけです。

fadeIn（）は、AJAXまたはハードロードを介して影響を受けるページにリンクするときの絶対位置指定で正しく機能します。問題を引き起こしているのはfadeOutだけです。

提案がありますか？

Answer 1

私は単純にdivに幅を追加することでこれを解決することができました。奇妙な

Answer 2

あなたのフェードアウト機能に実際に大きい、つまり5〜10秒の時間を追加してみてください。それでもフェードアウトが表示されない場合は、もう少しCSSに集中できます。それ以外の場合は、Ajaxifyを使用しているときに何かが停止していることがわかっていて、レンダリングが行われる前にフェードアウトがトリガーされて完了しています。

申し訳ありませんが、まだ質問にコメントすることはできません - 私はこれが答えではないことを知っています。

Answer 3

AJAXify gist by Baluptonを使用している場合は、その要点を介してJavascriptコードを読み込む際に問題が発生したと言います。スクリプトを使ってJavascriptを読み込んでいることを確認できますか？ alert("hello");を何もしないあなたのAJAXifiedページのそれぞれにJavascriptを含めてみてください。コードが表示されない場合、私はあなたのJavascriptが発射さえしていないと確信しています。その場合、このコードを試してみてください：

$scripts.each(function(){ 
    var $script = $(this), scriptText = $script.text(); 
    scriptText = "<script>" + scriptText + "</script>"; 
    contentHtml += scriptText; 
});