CODEWITHSUNDEEP
javascriptjquery
Lucas M
Lucas M

Reputation: 159

Fade in JSON ajax list with JQuery

I have the following slider:

https://jsfiddle.net/lucasmosele/px9ar93y/1/

My interval code is as follows:

var counter = 1;
var elements = json.slider.length;

// Set timer between quotes being visible
$("#quotes li:first-child").addClass("active");
int = setInterval(function(){
        $("#quotes li:nth-child(" + counter + ")").removeClass("active");
        $("#quotes li:nth-child(" + counter + ")").next().addClass("active");
    if (counter === elements){
        counter = 1;
    } else {
        counter++;
    }
}, 3000);

I want to be able to have the new content fadeIn, I have tried .fadeIn:

$("#quotes li:nth-child(" + counter + ")").next().addClass("active").fadeIn("slow");

but I got behavior that I didn't necessarily want. I also tried creating css transitions between li and li.active, but for some reason they dont show up unless .fadeIn is set to "slow".

Is there a cleaner way to do this?

Upvotes: 0

Views: 90

Answers (2)

Long Nguyen
Long Nguyen

Reputation: 11275

I think this is what you looking for:

$("#quotes li:first-child").addClass("active");
int = setInterval(function(){
        $("#quotes li:nth-child(" + counter + ")").fadeOut('slow', function() {
        $("#quotes li:nth-child(" + counter + ")").next().fadeIn('slow');
        });
    if (counter === elements){
        counter = 1;
    } else {
        counter++;
    }
}, 3000);

Here is the jsfiddle: https://jsfiddle.net/px9ar93y/6/

Upvotes: 0

void
void

Reputation: 36703

You can do 

$("#quotes li:nth-child(" + counter + ")").next().hide().addClass("active").fadeIn("slow");

Play it here

Upvotes: 1

Related Questions