1

誰か私を悲惨な状況から解放してください....私はこれに何時間も注いでいます...

私は（これは省略されています）追加を使用してページにボックスを追加する関数を作成しています。問題は、それらが追加されると、フェードイン機能が機能しないことです。 ただし、要素をページにハードコーディングすると機能します。

これが私のJavaScriptです：

          //Loop through the images and print them to the page
      for (var i=0; i < totalBoxes; i++){
          //$("p").add(arr).appendTo('#bg');
          $.ajax({
              url: "random.php?no=",
              cache: false,
              success: function(html){
                $(html).fadeIn(html).appendTo('#bg');
              }
          });
      }

    //Choose the image to be faded in
        $(".pf-box img").hover(function(){
        var largePath = $(this).attr("rel");
            $(this).fadeOut("slow", function() {
                    $(this).attr({ src: largePath }).fadeIn("slow");
            });
            return false;
        });

random.php は文字通り多くのボックスを印刷します...ここに印刷されたサンプルがあります:

<div class="pf-box" style="">
<a href="#">
This is where the image is printed with the rel attribute on the image tag. (stackoverflow didnt allow the posting of the img tag because its my first post)
</a>
</div>
4

2 に答える 2

5

関数のパラメーターfadeInが正しくないようです。フェードインする前に、ドキュメントに html を追加することも必要になると思います。

あなたの成功関数でこれを試してみませんか？

function(html) {
    $('#bg').append(html).fadeIn('slow');
}

また、fadeInのドキュメントページが役立つ場合もあります。

幸運を！

編集/更新

OK、私はあなたが今何をしようとしているのか知っていると思います。上記のステートメント (追加してからフェードインする) を修正したら、ajax の取得/追加が完了した後hoverにイベントを割り当てる必要があります。

何が起こっているかというと、コードの最初のブロックが、必要な画像を求める Web サーバーへの一連の非同期要求を開始しているということです。次に、最初のブロックが「完了」した直後、ただし (重要なことに!) これらのリクエストが完了する前に、コードの 2 番目のブロックが (実行しようとして) 実行されます。イベントを追加しようとするセレクター「.pf-box img」を探していますhoverが、問題は、これらの画像がまだページに存在しないことです!

画像を選択したりイベントを追加したりする前に、サーバーから画像が戻ってくるまで待つ必要があります。これは、関数で既に部分的にsuccess機能しているコールバックを介して行われます...

（注意してください、私はこれをテストしていません。デモンストレーションのみを目的としています...）

// Loop through the images and print them to the page.
// Attach hover event within the callback, after image has been added.
for (var i=0; i < totalBoxes; i++){
    $.ajax({
        url: "random.php?no=",
        cache: false,
        success: function(html) {
            // following line I originally suggested, but let's make it better...
            //$('#bg').append(html).fadeIn('slow');
            // also note the fine difference between append and appendTo.
            var $d = $(html).hide().appendTo('#bg').fadeIn('slow');
            $('img', $d).hover(function() {
                var largePath = $(this).attr("rel");
                $(this).fadeOut("slow", function() {
                    $(this).attr({ src: largePath }).fadeIn("slow");
                });
            });
        }
    });
}
于 2009-11-04T00:57:51.153 に答える
1

あなたは方法を誤解していfadeInます。

fadeInは既存の要素に作用し、 のように要素の不透明度をアニメーション化しfadeOutます。HTML を#bg要素に追加してから、フェードインします。

例えば：

                      success: function(html){
                            $(html).appendTo('#bg').fadeIn("slow");
                      }
于 2009-11-04T01:03:47.560 に答える