javascript - jquery链淡入淡出方法不起作用

Question

我正在尝试为主页创建一个网站横幅，它会淡出然后淡入新图像。这些图像包含在一个数组中，我正在使用 setInterval 方法来浏览它们。

但是，我在淡入淡出方面遇到了问题。图像在变化，但没有达到 jquery 期望的效果。

当我检查控制台时，它显示以下消息:

$(...).attr(...).fadeIn is not a function.

$(document).ready(function() {

  var bannerImages = [
    "banner1.jpeg",
    "banner2.jpg",
    "banner3.png"
  ];

  var currentImage = 0;

  // CHANGE THE BANNER IMAGE EVERY 5 SECONDS
  setInterval(function() {
    if (currentImage > bannerImages.length - 1) {
      currentImage = 0;
    }

    $(".banner-img").attr("src", bannerImages[currentImage]).fadeIn();
    currentImage++;
  }, 5000)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="banner">
  <div class="row">
    <div class="col-md-12">
      <img src="banner3.png" class="img-responsive center-block banner-img">
    </div>
  </div>
</section>

Answer 1

我在测试您的代码时没有收到错误消息... 对于淡入淡出链，您必须链接 fadeOut 和 FadeIn，在 fadeOut 回调中触发 fadeIn:

HTML(我删除了 src 以便在第一张图片上淡入淡出):

<section id="banner">
    <div class="row">
        <div class="col-md-12">
            <img src="" class="img-responsive center-block banner-img">
        </div>
    </div>
</section>

CSS:

.banner-img { display: none; }

JS :

$(document).ready(function() {

    var bannerImages = [
        "banner1.jpeg",
        "banner2.jpg",
        "banner3.png"
    ];
    var currentImage = 0;

    // First display
    $(".banner-img").attr("src", bannerImages[currentImage++]).fadeIn();

    // CHANGE THE BANNER IMAGE EVERY 5 SECONDS
    setInterval( function() {
        if (currentImage === bannerImages.length) {
            currentImage = 0;
        }
        $(".banner-img").fadeOut(function() {
            $(".banner-img").attr("src", bannerImages[currentImage++]).fadeIn();
        });
    }, 5000);
});

https://jsfiddle.net/vgta1rnm/2/