jQueryを使用してクリックして配列をループする方法は？

Question

私は引用符の配列を持っており、ボタンをクリックすると、ランダムに新しい引用にフェードアウトしたいと思います。

以下のコードでは、配列内の次のランダムに選択された値にフェードアウトする代わりに、完全にフェードアウトし、ボタンをクリックすると別の値を表示しません。

var quotes = [ 
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", 
"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.", 
"Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", 
] 

$(document).ready(function() { 
    $('.btn').click(function() { 
    $('#quoteDisplay').fadeOut('slow'); 
    var randomNumber = Math.floor(Math.random() * (quotes.length)); 
    document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber]; 
    }); 
}); 

Answer 1

innerHTMLを挿入したら、qouteDisplay DOM要素をフェードインする必要があります。

あなたはテキストが完全にフェードアウトした後にのみ、あなたが別の関数にあなたのロジックを追加し、コールバックとして、それを追加する必要がありますテキストが変更することもために、要素のテキストを変更した後 $('#quoteDisplay').fadeIn('slow');を追加するのを忘れ

var quotes = [ 
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", 
"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.", 
"Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", 
] 

$(document).ready(function() { 
    $('.btn').click(function() { 
    $('#quoteDisplay').fadeOut('slow'); 
    var randomNumber = Math.floor(Math.random() * (quotes.length)); 
    document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber]; 
    $('#quoteDisplay').fadeIn('slow'); 
    }); 
}); 

Answer 2

fadeOut機能に接続します。
私は以下の例を追加しました。

var quotes = [ 
 
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", 
 
"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.", 
 
"Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", 
 
] 
 

 
$(document).ready(function() { 
 
    function changeAndDisplayMessage() { 
 
    var randomNumber = Math.floor(Math.random() * (quotes.length)); 
 
    document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber]; 
 
    $('#quoteDisplay').fadeIn(); 
 
    } 
 
    $('.btn').click(function() { 
 
    $('#quoteDisplay').fadeOut('slow',changeAndDisplayMessage); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <input type='button' class='btn' value='Generate Random Message'> </input> 
 
    <h4 id='quoteDisplay'> Message will show here </h4> 
 
</div>

Answer 3

here

だからあなたは完全は、新しいテキストを置くとき、フェードアウトし、再びフェードインする必要があり見てください：

EDIT：例はコーヒーであるがスクリプトの場合、私のプレーンなJavaScriptの時間はずっと前です。方向を指すだけです：

$qd=$('#quoteDisplay') 
$gd.fadeOut(complete: => 
    $qd.text(quotes[randomNumber]) 
    $gd.fadeIn() 
)