jQueryを使用して配列でランダム要素を選択する方法

Question

私は幸運なアニメーションを感じています。その高さを選択する。彼らはそれが動作する方法は、私は最大の高さとボタンを持っていると私はオーバーフローを隠した。 htmlとcssはうまくいきました。jQueryがこれらの要素の1つをランダムに選択したいだけです。

$('.mainbutton:nth-child(2)').hover(function() { //jQuery 
    var list = $(".mainbutton ul").toArray(); 
    var elemlength = list.length; 
    var randomnum = Math.floor(Math.random()*elemlength); 
    var randomitem = list[randomnum]; 

    $('.'+ randomitem).css('bottom', '-170px'); 
    $('.'+ randomitem).css('bottom', '-130px'); 
    $('.'+ randomitem).css('bottom', '-100px'); 
    $('.'+ randomitem).css('bottom', '-70px'); 
    $('.'+ randomitem).css('bottom', '-40px'); 
    $('.'+ randomitem).css('bottom', '-10px'); 
    $('.'+ randomitem).css('bottom', '-180px'); 
    $('.'+ randomitem).css('bottom', '-220px'); 
    $('.'+ randomitem).css('bottom', '-250px'); 
    $('.'+ randomitem).css('bottom', '-170px'); 
    $('.'+ randomitem).css('bottom', '-170px'); 
}); 


    .mainbutton {   /*css*/ 
     padding: 0px 0px; 
     background: #f2f2f2; 
     border-width: 0px; 
     border-style: solid; 
     border-radius: 2px; 
     font-weight: bold; 
     font-size: 12px; 
     margin: 29 6px; 
     color: #757575; 
     overflow: hidden; 
     position: relative; 
     height: 34px; 
     width: 144px; 
     box-sizing: inherit; 
    } 
    .mainbutton:nth-child(1) { 
     bottom: 13px; 
    } 
    .mainbutton ul li { 
     list-style-type: none; 
     padding: 8px 10px; 
     text-align: left; 
    } 
    .mainbutton ul { 
     padding-left: 10%; 
     position: absolute; 
     bottom: -160px; 
     width: 144px; 
    } 
    .one { 



<div id="search-buttons" align="center"> <!-- html --> 
     <button class="mainbutton">Google Search</button> 
     <button class="mainbutton"> 
      <ul> 
      <li>I'm Feeling Stellar</li> 
      <li>I'm Feeling Artistic</li> 
      <li>I'm Feeling Wonderful</li> 
      <li>I'm Feeling Curious</li> 
      <li>I'm Feeling Hungry</li> 
      <li>I'm Feeling Lucky</li> 
      <li>I'm Feeling Doodley</li> 
      <li>I'm Feeling Generous</li> 
      <li>I'm Feeling Trendy</li> 
      <li>I'm Feeling Puzzled</li> 
      <li>I'm Feeling Playful</li> 
      </ul> 
     </button> 

Answer 1

いくつかあります。

• キャッシュ選択
• 使用のアニメーションと@mplungjan

  ストア、アレイ内のマージンによって解答に追加

var pos = { 
 
    "Playful": -10, 
 
    "Puzzled": -40, 
 
    "Trendy": -70, 
 
    "Generous": -100, 
 
    "Doodley": -130, 
 
    "Lucky": -160, 
 
    "Hungry": -190, 
 
    "Curious": -220, 
 
    "Wonderful": -250, 
 
    "Artistic": -280, 
 
    "Stellar": -310 
 
} 
 

 
$(function() { 
 
    $('.mainbutton:nth-child(2)').hover(
 
    function() { 
 
     var $ul = $(".mainbutton ul"), 
 
     $lis = $ul.children(), 
 
     $li = $lis.eq(Math.floor(Math.random() * $lis.length)), 
 
     name = $li.text().replace(/I'm Feeling /, ""); 
 

 
     $ul.css("bottom", pos[name] + "px"); // using name 
 
     $ul.animate({'bottom': '-170px'}) 
 
     .animate({'bottom': '-130px'}) 
 
     .animate({'bottom': '-100px'}) 
 
     .animate({'bottom': '-70px'}) 
 
     .animate({'bottom': '-40px'}) 
 
     .animate({'bottom': '-10px'}) 
 
     .animate({'bottom': '-180px'}) 
 
     .animate({'bottom': '-220px'}) 
 
     .animate({'bottom': '-250px'}) 
 
     .animate({'bottom': '-170px'}) 
 
     .animate({'bottom': '-170px'}); 
 
    }, 
 
    function() { 
 
     $(".mainbutton ul").stop().animate({ 
 
     'bottom': pos["Lucky"] + "px" 
 
     }); 
 
    } 
 

 
); 
 
});

.mainbutton { 
 
    /*css*/ 
 
    padding: 0px 0px; 
 
    background: #f2f2f2; 
 
    border-width: 0px; 
 
    border-style: solid; 
 
    border-radius: 2px; 
 
    font-weight: bold; 
 
    font-size: 12px; 
 
    margin: 29 6px; 
 
    color: #757575; 
 
    overflow: hidden; 
 
    position: relative; 
 
    height: 34px; 
 
    width: 190px; 
 
    box-sizing: inherit; 
 
} 
 

 
.mainbutton:nth-child(1) { 
 
    bottom: 13px; 
 
} 
 

 
.mainbutton ul li { 
 
    list-style-type: none; 
 
    padding: 8px 10px; 
 
    text-align: left; 
 
} 
 

 
.mainbutton ul { 
 
    padding-left: 10%; 
 
    position: absolute; 
 
    bottom: -160px; 
 
    width: 190px; 
 
} 
 

 
.one {

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div id="search-buttons" align="center"> 
 
    <!-- html --> 
 
    <button class="mainbutton">Google Search</button> 
 
    <button class="mainbutton"> 
 
    <ul> 
 
     <li>I'm Feeling Stellar</li> 
 
     <li>I'm Feeling Artistic</li> 
 
     <li>I'm Feeling Wonderful</li> 
 
     <li>I'm Feeling Curious</li> 
 
     <li>I'm Feeling Hungry</li> 
 
     <li>I'm Feeling Lucky</li> 
 
     <li>I'm Feeling Doodley</li> 
 
     <li>I'm Feeling Generous</li> 
 
     <li>I'm Feeling Trendy</li> 
 
     <li>I'm Feeling Puzzled</li> 
 
     <li>I'm Feeling Playful</li> 
 
    </ul> 
 
    </button>

Answer 2

それらをチェーン

マージン

var margin_index= Math.round(Math.random() * 10);

の

var margin= ['-170px', '-130px', '-100px', '-70px', '-40px', '-10px', '-180px', '-220px', '-250px', '-170px', '-170px'];

選択ランダム指数はランダムなマージン

$ul.animate({'bottom': margin[margin_index]});