ホバーにランダムな要素を表示する、Jquery

Question

ロゴの上にマウスを重ねるたびにランダムな段落要素が表示され、マウスが離れると再び非表示になります。ここで

は、段落のためのHTMLおよびロゴです：

$('p.quote').hide(); 

var quotes = $('p.quote'); 
var rand = Math.floor(Math.random() * quotes.length); 

$('#logo').hover(function(){ 
    quotes.eq(rand).toggle(); 

    }); 

残念ながら、これだけのディスプレイに同じ引用：

<div> 
<p class="quote" >ryan is a champion at indesign</p> 
<p class="quote">ryan is not a champion at javascript</p> 
<p class="quote">ryan likes ramen</p> 
</div> 

<a href="#"><img id="logo" src="../_blog/_assets/_logo_icons/_logo.png" alt="logo" /></a> 

このスクリプトでは、私がこれまで果たしていることがわかりました最も近いです私はページを更新しない限り毎回。その他の提案はありますか？

おかげ ライアン

Answer 1

移動ホバー機能への代わりに、その外側var randを開始するライン。

は、次に変更：

quotes.eq(rand).toggle(); 

へ：

quotes.hide().eq(rand).show(); 

あなたはまた、彼らはホバリング停止したとき、それは引用符を隠すように、（）.hoverを変更する必要があります。あなたのホバー・ハンドラ内

var quotes = $('p.quote'); 

$('#logo').hover(
    function() { 
    var rand = Math.floor(Math.random() * quotes.length); 
    quotes.hide().eq(rand).show(); 
    }, 
    function() { 
    quotes.hide() 
    } 
); 

Answer 2

移動var rand = Math.floor(Math.random() * quotes.length);、このような：

$('#logo').hover(function(){ 
    var rand = Math.floor(Math.random() * quotes.length); 
    quotes.eq(rand).toggle(); 

    }); 

この方法では、それが更新されますあなたのランドたび

Answer 3

ワーキングここ

は完全なコードですフィドル： http://jsfiddle.net/wEnAW/7/