幻灯片：在JQuery上淡入和淡出

Question

I am creating a slideshow using JQuery. Slideshow works with the code below:

     function playSlideshow() {

            timer = setInterval(function () {

            thumbnails.children[currentNum].className = '';

                currentNum++;
                if (currentNum > data.files.length - 1) {
                    currentNum = 0;
                    console.log(currentNum);
                }

                var currentImage = data.files[currentNum];
                target.src = currentImage;

                thumbnails.children[currentNum].className = 'current';
               //playSlideshow();
            }, 3000);                
        }

However, I got an error (currentImage.fadeIn is not a function) once I inserted the lines of codes below:

    function playSlideshow() {

        timer = setInterval(function () {

            thumbnails.children[currentNum].className = '';

            $('#main>img').fadeOut('slow');

            currentNum++;
            if (currentNum > data.files.length - 1) {
                currentNum = 0;
            }

            var currentImage = data.files[currentNum];
          //var image = data.files[currentNum].clone(true);
            $('#main>img').prepend(currentImage.fadeIn('slow'));
            target.src = currentImage;

            thumbnails.children[currentNum].className = 'current';
           //playSlideshow();
        }, 3000);                
    }

I got the 'files' array from a JSON file using Ajax. Does anyone has an idea how to fix this?

Answer 1

Try

$('#main>img').prepend(currentImage).fadeIn('slow');

Fade on the jQuery object, not the array object.

currentImage.fadeIn is not a function is telling you that either currentImage is not a jQuery object, or fadeIn doesn't exist in the jQuery namespace.