Fade-Effekt in Text Rotator Plugin für jQuery

Question

Ich benutze diesen Code von http://www.jqueryscript.net/rotator/Lightweight-Automatic-Text-Rotator-Plugin-For-jQuery-Quote-Spinner.html, und ich möchte "Fade" -Effekt verwenden.

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

Irgendwelche Ideen? Vielen Dank im Voraus.

Answer 1

Scheint so, als ob das Skript die CSS-Übergangseigenschaft für den Fade-Effekt verwendet. Stellen Sie sicher, dass Sie folgende Regel in Ihrem CSS haben. Ich habe dieses Bit von dem Link, den Sie zur Verfügung gestellt haben:

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