javascript - 使用 JQuery 淡入 JSON ajax 列表

Question

我有以下 slider :

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

我的间隔代码如下:

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

我希望能够让新内容淡入，我已经尝试过.fadeIn:

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

但我得到了我不一定想要的行为。我还尝试在 li 和 li.active 之间创建 css 过渡，但由于某种原因，除非 .fadeIn 设置为“慢”，否则它们不会显示。

有没有更干净的方法来做到这一点？

Answer 1

你可以做到

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

Play it here