jQuery fadeIn after items are added using append

Please please someone put me out of my misery....i have poured hour upon hour into this...

I have (this is abbreviated) been creating a function which adds boxes to a page using append. The problem is once they have been added the fadeIn function doesnt work. It will work however if i hard code the element to the page:

Here is my 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;
        }); 

the random.php literally prints however many boxes...here is a printed sample:

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

It looks like the parameters to your fadeIn function are incorrect. I think you will also want to append the html to your document before you can fade it in.

Try this, in your success function?

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

You may also find the doc page for fadeIn to be helpful.

Good luck!

EDIT/UPDATE

OK, I think I know what you're trying to do now. After you have fixed the statement I described above (appending and then fading in), what you need to do is assign your hover event after the ajax retrieval/appending has had a chance to complete.

What is happening is that your first block of code is firing off a bunch of asynchronous requests to the webserver for the images you want. Then, instantly after your first block has "completed", but (importantly!) before these requests have had a chance to complete, your second block of code is (trying to) execute. It is looking for the selector ".pf-box img" to try and add the hover event, but the problem is, these images do not yet exist on the page!

What you need to do is wait until the images have come back from the server before you attempt to select them or add events to them. This is done via callbacks, which you already have partially working in your success function...

(Please note, I haven't tested this, it is meant to demonstrate only...)

// 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");
                });
            });
        }
    });
}

You are misunderstanding the fadeIn method.

fadeIn operates on an existing element(s), and animates the opacity of the element, just like fadeOut. You want to append the HTML to your #bg element and then fade it in.

For example:

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