Question

I have a working jquery image carousel that I was building. It’s mostly finished (just the increase button works): http://jsfiddle.net/2C8fy/7/

The only problem I’m facing is that when the image get appended it does not fade in. It just appears. I tried adding another slot on the right that was 0 opacity and then animating it to fade in but that didn’t seem to work either. How can I animate that right slot image to make it appear like it is fading in? Here’s what I have right now:

$('#basic_div').animate({          //slides the div with the images in it to the left.
            left: '-=40px'
        }, 300, function() {

        });

        left.animate({             //fade out effect for the left most image
            opacity: 0
        }, 300, function() {
            left.remove();         //gets rid of left most image after it becomes invisible.
            $('#basic_div').css({
                left: '0px'        //resets the div that contains the images
            });
        });


            middle.attr('id', 'left_slot');       //changes ids
            right.attr('id', 'middle_slot');


            $("#basic_div").append(newImgSL);
            newImgSL.attr('id', 'right_slot');
            newImgSL.animate({
                opacity: 100   //I thought this would make it fade in, but it still just appears.
            }, 300);

Answer 1

To fadeIn() an image, start with display: none or .hide() and opacity: 1.

Or you can set the initial opacity to 0 and use fadeTo(3000, 1).

fadeIn() expects the image to be initially display: none with the opacity set to the final opacity. It will then remember the final opacity, set the opacity to 0, make the image visible and then start animating the opacity.

fadeTo() just starts at the current opacity and fades to the newly specified opacity.

So, in your case, you could do this:

// set id and initial opacity
newImgSL.attr('id', 'right_slot').css("opacity", 0);
// put it into the page
$("#basic_div").append(newImgSL);
// fade to visible
newImgSL.fadeTo(300, 1);    

Also, remember that opacity is a decimal number from 0 to 1.

Your code doesn’t show where newImgSL comes from. Remember that you also need to make sure that the image has finished loading before trying to fade it.