使用JQuery淡出JSON ajax列表

Fade in JSON ajax list with JQuery

本文关键字：ajax 列表 JSON 淡出 JQuery 使用      更新时间：2023-09-26

我有以下滑块：

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，我已经试过了。fadeIn:

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

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

有更干净的方法吗？

您可以进行

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

在此处播放

我想这就是您想要的：

$("#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);

这是jsfiddle：https://jsfiddle.net/px9ar93y/6/

相关文章：