How can I select random element with an array using jQuery

Question

I am re-making the google I'm feeling lucky animation and I'm just wondering how I can display one of these events on my button but make it so it randomly chooses its height. They way it works is that I have a button with a max height and I hid the overflow. The html and css are fine, I just want the jQuery to randomly select one of those elements.

$('.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

There are several things.

• cache the selection
• use animate and chain them

 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

Adding to the answer by @mplungjan

Store the margin in an array

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

Select random index of the margin

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

Set random margin

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