javascript - JS和jQuery，执行淡入淡出功能

我想一个简单的问题。我想在每个数组元素的循环中执行jQuery fade函数。

码：

var dlugosc = 5;
dlugosc = dlugosc*1000;

var slideIndex = 0;
carousel();

function carousel() {
    var x = document.getElementsByClassName("slides");
    for (var i = 0; i < x.length; i++) {
      x[i].style.display = "none";
      // here I'd like to execute this function like this: x[i].fadeOut(500);
    }
    slideIndex++;
    if (slideIndex > x.length) {
      slideIndex = 1
    }
    x[slideIndex-1].style.display = "block";
    // and here like this: x[slideIndex-1].fadeIn(500);
    setTimeout(carousel, dlugosc);
}

我该怎么做？谢谢

更新

有用：
$(".slides")[i].style.display = "none";

那么，为什么它不起作用？
$(".slides")[i].fadeOut(500);

最佳答案

我知道了。我使用了promise对象来确保所有动画均针对“ .slides”完成，因为如果我仅使用回调函数，则它将为每个幻灯片调用一次回调，从而使整个动画变得毫无意义。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>

$(".slides").hide();
var waitTime = 1 * 1000;
var slideIndex = 0;
carousel();

function carousel() {
    $(".slides").fadeOut(250).promise().done(function () {
        $(".slides").eq(slideIndex++ % $(".slides").length).fadeIn(250);
    });
    setTimeout(carousel, waitTime);
}

</script>

更新以回应发布者的问题：

$（“。slides”）是一个jQuery对象，可以用任何类似于jQuery的方式进行修改（因此，fadeIn可以使用）。其中$（“。slides”）[0]作为.slides的第一个实例获取，但作为JavaScript dom对象，该对象无法访问jQuery的任何功能。但是，如果您执行$（“。slides”）。eq（0），则将第一个元素作为jQuery对象获取。然后，您可以执行$（“。slides”）。eq（0）.fadeIn（500）;

关于javascript - JS和jQuery，执行淡入淡出功能，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42749844/