最初のランダムな引用のみがフェードインします

Question

ランダムクォートジェネレータアプリを構築しています。 JS（クリック時）にフェーディング効果を追加しようとすると、最初の見積もりに対してのみ機能します。

var quotes = { 
 
    quote1: "Life isn’t about getting and having, it’s about giving and \ 
 
being - Kevin Kruse - ", 
 
    quote2: "Whatever the mind of man can conceive and believe, it can \ 
 
achieve - Napoleon Hill - " 
 
} 
 

 
$(document).ready(function() { 
 
    // function generator 
 
    var randQuote = function(obj) { 
 
    var keys = Object.keys(obj); 
 
    //print key values randomly 
 
    return obj[keys[Math.floor(keys.length * Math.random())]]; 
 
    }; 
 
    // function display 
 
    $("button").click(function myQuote() { 
 
    $("#demo").fadeIn(); 
 
    document.getElementById("demo").innerHTML = randQuote(quotes); 
 
    }); 
 
});

#quote { 
 
    background-color: white; 
 
    border-radius: 2%; 
 
    box-shadow: 0 0 25px #161616; 
 
} 
 

 
.paragraph { 
 
    line-break: auto; 
 
    font-family: 'Satisfy', cursive; 
 
    font-size: xx-large; 
 
    margin: 20px; 
 
    display: none; 
 
} 
 

 
.display { 
 
    background-color: #dfdfdf; 
 
} 
 

 
.title { 
 
    font-family: 'Dancing Script', cursive; 
 
    margin: 20px; 
 
} 
 

 
.btn-custom { 
 
    margin: 20px; 
 
    font-family: 'Dancing Script', cursive; 
 
    font-size: x-large; 
 
} 
 

 
.container { 
 
    position: fixed; 
 
    top: 35%; 
 
    left: 30%; 
 
    margin-top: -100px; 
 
    margin-left: -200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-8 col-md-offset-4"> 
 
     <h1 class="title"><strong>Random Quotes For You</strong></h1> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-md-8 col-md-offset-2" id="quote"> 
 
     <p id="demo" class="paragraph"></p> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-md-8 col-md-offset-5"> 
 
     <button onclick="myQuote()" class="btn btn-primary btn-custom">New Quote</button> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

これは、その後、冒頭で引用してフェードそれをフェードアウトし、バックでフェードイン、その後、新しい引用と交換する必要があります。あなたはに「500」を変更することができますどのフェードタイムにも最適です。

onclick="myQuote()"も、<button>要素で取り除くことができます。

再び

$("button").click(function myQuote(){ 
    $("#demo").fadeOut(500, function(){ 
     document.getElementById("demo").innerHTML = randQuote(quotes); 
    }); 
    $("#demo").fadeIn(500); 
}); 

Answer 2

あなたはすでにその要素の上にフェードインと呼ばれてきました。あなたはそれを消してからhtmlを元に戻してフェードインする必要があります。なぜそれをしなければならないのか理解したら、fadeToggleを提供し、コールバックをアニメーションで見なければならないので、フェードインで再びそれを示す。

$("button").click(function(){ 
    var flip = $("#div1"); 
    flip.fadeToggle('slow', function(){flip.html('weee').fadeToggle();}); 
});