jquery fadeIn after items are added using append

Question

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>

Answer 1

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

Answer 2

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

Answer 3

Funka...you are on the ball mate and thats exactly the issue...thank you so much!

Could i ask one more question about this code?

Currently it fades out the image before fading in...im trying to get the effect of the colour image fading through the black and white one...and then when you remove the hover status it should fade back to black and white. I am using the two images to do this as you know.

How could i rewrite the fadeout part to simply fade the other in over it and then on mouseout go back to its original state...?

You have been a tremendous help and its greatly appreciated.