5

ページ遷移を実現するために取り組んでいるサイトで AJAXify を使用していますが、jQuery で奇妙な動作が発生しています。

私のコード:

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;}

AJAX リンクを介してページにリンクするのではなく、URL を介してページをロードすると、div は正しくフェードアウトしますが (アラートが表示されます)、AJAX 化されたナビゲーションを介してページにリンクすると、まだフェードは発生しません。私はまだアラートを受け取っているので、関数はfadeOut()が確実にトリガーされています。

CSS から絶対配置を削除し、AJAX 経由でページにリンクすると、必要に応じて div がフェードアウトします (アラートが表示されます)。divの絶対位置に問題が発生しているようです。

AJAX またはハード ロードを介して影響を受けるページにリンクする場合、fadeIn() は絶対配置で正しく機能します。問題を引き起こしているのはフェードアウトだけです。

助言がありますか？

4

3 に答える 3

4

divに幅を追加するだけでこれを解決できました。奇妙な

于 2012-07-03T23:53:18.323 に答える
0

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

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

于 2012-07-03T22:30:02.083 に答える
0

Balupton による AJAXify 要点を使用している場合(それがあなたが言及しているように思えます)、その要点を介して Javascript コードをロードする際に問題が発生したと言えます。スクリプトを使用して Javascript をロードしていることを確認できますか? AJAX 化された各ページに Javascript を含めてみてくださいalert("hello");。コードが表示されない場合は、Javascript が起動していないに違いありません。その場合は、このコードを試してください。うまくいきました：

$scripts.each(function(){
    var $script = $(this), scriptText = $script.text();
    scriptText = "<script>" + scriptText + "</script>";
    contentHtml += scriptText;
});
于 2012-07-03T22:41:25.303 に答える