FadeIn // FadeOut einige Zitate

Question

Ich versuche, meine Anführungszeichen in this fiddle zu bekommen, um einen Ein-/Ausblendeffekt zu haben, wenn die Plus-Taste geklickt wird. Ich habe es gelesen und ähnliche Projekte betrachtet, kann es aber nicht herausfinden.

ich versuchte, indem diese (bereitet bei meinem Versuch zu lachen), aber es natürlich broke the damn thing:

$("#random-quote").click(function() { 
    $("#main-quote").fadeOut(300); 
    $("#main-quote").fadeIn(300); 
    } 
}; 

Jede Hilfe wäre sehr dankbar, danke!

Answer 1

Wenn Sie den Text vor auszublenden möchten entfernt ändern, können Sie die Ausblendfunktion verwenden, die wie folgt aussieht:

Fadeout

$("#main-quote").fadeOut(300, function() {}); 

Sie können Ihre $('#main-quote').text(); Änderungen in dieser wickeln und dann fadeIn(); am Ende nennen:

jQuery

$("#main-quote").fadeOut(300, function() { 
    $('#main-quote').text(selectedQuote.quote); 
    var selectedBG = selectedQuote.background; 
    var selectedMovie = selectedQuote.movie; 
    console.log(selectedBG); 
    console.log(selectedMovie); 
    $("body").css("background-image", "url('" + selectedBG + "')"); 


    $('#main-quote').text(selectedQuote.quote); 
    var selectedMovie = selectedQuote.movie; 
    console.log(selectedMovie); 
    $("#what-movie").html(selectedMovie); 
    $("#main-quote").fadeIn(300); 
}); 

Auch für diese zu arbeiten, Sie müssen Ihre $('#random-quote').click(getQuote); Zeile entfernen, die den Hintergrund zweimal geändert hat, weil Sie Th aufrufen Die gleiche Klickfunktion zweimal.

JSFiddle

Answer 2

Set csstransition für background-image bei body; auch entfernt $('#random-quote').click(getQuote);

transition: background-image 200ms ease-in-out; 

Javascript

function getQuote() { 
    var randomIndex = Math.floor(Math.random() * quotes.length); 
    var selectedQuote = quotes[randomIndex]; 
    // `.fadeOut` here 
    $('#main-quote').fadeOut(200).text(selectedQuote.quote); 
    var selectedBG = selectedQuote.background; 
    console.log(selectedBG); 
    $("body").css("background-image", "url('" + selectedBG + "')"); 
    // `.fadeIn` here 
    $('#main-quote').text(selectedQuote.quote).fadeIn(200); 
    var selectedMovie = selectedQuote.movie; 
    console.log(selectedMovie); 
    $("#what-movie").html(selectedMovie); 
} 

jsfiddle https://jsfiddle.net/hanyb9da/36/

Answer 3

Versuchen fadeOut das gesamte Feld und danach die Funktion ausführen, den Text zu ändern:

$('#main-box').fadeOut(800,function(){ 
    $("body").css("background-image", "url('" + selectedBG + "')"); 
    $('#main-quote').text(selectedQuote.quote); 
    $(this).fadeIn(500) 
}); 

auch zu machen "Glatt" den Hintergrund ändern verwenden transition:

body { 
    transition:all .3s linear; 
} 

Updated Fiddle

---

_{Hinweis: Ich habe auch den Klick binden an die Funktion getQuote()}

Answer 4

Sie können mit CSS3 das tun.

.btn { 
 
    background: red; 
 
    padding: 20px; 
 
    color:white; 
 
    border:none; 
 
    outline:none; 
 
    transition: opacity .3s; 
 
} 
 
.btn:active { 
 
    opacity: 0; 
 
}

<button class="btn">RAND</button>