使用append添加项后的jQuery fadeIn

请有人把我从痛苦中解救出来……我一个小时又一个小时地投入其中

我已经（缩写）创建了一个函数，使用append将框添加到页面中。问题是一旦它们被添加，fadeIn函数就不起作用了但是，如果我将元素硬编码到页面中，它将起作用：

以下是我的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;
        }); 

//循环浏览图像并将其打印到页面上
对于（变量i=0；i

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>

---

您的

fadeIn

函数的参数似乎不正确。我认为在淡入之前，您还需要将html附加到文档中

试试这个，在你的成功功能中

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

您也可能会发现fadeIn的页面很有帮助

祝你好运

---

编辑/更新 好吧，我想我知道你现在想做什么了。在修复了上面描述的语句（追加然后淡入）之后，您需要做的是在ajax检索/追加有机会完成之后分配

hover

事件

发生的情况是，您的第一块代码向Web服务器发出一系列异步请求，以获取所需的图像。然后，在您的第一个块“完成”之后，但（重要的是！）在这些请求有机会完成之前，您的第二个代码块正在（尝试）执行。它正在寻找选择器“.pf box img”来尝试添加

悬停事件，但问题是，这些图像在页面上还不存在

您需要做的是等待图像从服务器返回，然后再尝试选择它们或向它们添加事件。这是通过回调完成的，您已经在
success
函数中部分使用了回调

（请注意，我还没有测试这个，它只是为了演示…）

//循环浏览图像并将其打印到页面上。
//添加图像后，在回调中附加悬停事件。
对于（变量i=0；i
您的
fadeIn
函数的参数似乎不正确。我认为在淡入之前，您还需要将html附加到文档中

试试这个，在你的成功功能中

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

您也可能会发现fadeIn的页面很有帮助

祝你好运


编辑/更新
好吧，我想我知道你现在想做什么了。在修复了上面描述的语句（追加然后淡入）之后，您需要做的是在ajax检索/追加有机会完成之后分配
hover
事件

发生的情况是，您的第一块代码向Web服务器发出一系列异步请求，以获取所需的图像。然后，在您的第一个块“完成”之后，但（重要的是！）在这些请求有机会完成之前，您的第二个代码块正在（尝试）执行。它正在寻找选择器“.pf box img”来尝试添加
悬停事件，但问题是，这些图像在页面上还不存在

您需要做的是等待图像从服务器返回，然后再尝试选择它们或向它们添加事件。这是通过回调完成的，您已经在
success
函数中部分使用了回调

（请注意，我还没有测试这个，它只是为了演示…）

//循环浏览图像并将其打印到页面上。
//添加图像后，在回调中附加悬停事件。
对于（变量i=0；i
您误解了该方法

fadeIn
对现有元素进行操作，并设置元素不透明度的动画，就像
fadeOut
一样。您希望将HTML附加到
#bg
元素中，然后淡入

例如：

                      success: function(html){
                            $(html).appendTo('#bg').fadeIn("slow");
                      }

你误解了这个方法