mercredi mercredi - 1 month ago 14
Ajax Question

Slideshow: Fade in and Fade out on JQuery

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 Source

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.