jQuery的Text Rotator Plugin中的淡入淡出效果

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; 
}