jQuery 的文本旋转器插件中的淡入淡出效果

Question

我正在使用 http://www.jqueryscript.net/rotator/Lightweight-Automatic-Text-Rotator-Plugin-For-jQuery-Quote-Spinner.html 的代码，我想使用 "fade" 效果。

var $ = jQuery.noConflict();
var spinner = {
    index: 0,
    auto: function(currentIndex) {
      if (currentIndex != undefined) {
        spinner.index = currentIndex % spinner.quotes.length;
      } else {
        spinner.index = (spinner.index + 1) % spinner.quotes.length;
      }
      spinner.quotes.removeClass("show");
      $(spinner.quotes[spinner.index]).addClass("show");
      spinner.dots.removeClass('dot-fill');
      $(spinner.dots[spinner.index]).addClass('dot-fill');
    },

    initial: function(){
      this.quotes = $(".quote-rotate");
      this.images = $(".quote-image");
      spinner.quotes.first().addClass("show");
      //dots
      for (i = 0; i < spinner.quotes.length; i++) {
        $('.quote-dots').append('<div class="nav-dot"></div>');
      }
      this.dots = $(".nav-dot");
      $(spinner.dots).first().addClass('dot-fill');
    },

    dotnav: function(){
      $(spinner.dots).on("click", function(){
        var currentIndex = $(spinner.dots).index(this);
        spinner.auto(currentIndex);
        window.clearInterval(interval);
        interval = window.setInterval(spinner.auto, 8000);
      });
    }
  }

jQuery(document).ready(function($){
  spinner.initial();
  spinner.dotnav();
  interval = window.setInterval(spinner.auto, 3000);
});

有什么想法吗？提前谢谢你。

Answer 1

似乎脚本正在使用 CSS 过渡属性来实现淡入淡出效果。确保您的 CSS 中有以下规则。我从您提供的 link 中提取了这一点：

.quote-rotate {
  position: absolute;
  top: 10px;
  opacity: 0;
  overflow: visible;
  visibility: hidden;
  transition: opacity, 0.3s, ease;
  padding-bottom: 10px;
 font-family: $font-brand-lighter;
}

jQuery 的文本旋转器插件中的淡入淡出效果

Fade effect in Text Rotator Plugin for jQuery

wordpress

jquery

effect