Question

我在http://www.jqueryscript.net/rotator/Lightweight-Automatic-Text-Rotator-Plugin-For-jQuery-Quote-Spinner.html使用此代码，我想使用“淡入淡出”效果。

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中有以下规则。我从你提供的链接中取得了这一点：

.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的Text Rotator插件中淡化效果

1 个答案: