我正在重新制作谷歌我感觉很幸运动画,我只是想知道如何在我的按钮上显示其中一个事件,但是它随意选择它的高度。他们的工作方式是我有一个最大高度的按钮,我隐藏了溢出。 html和css很好,我只想让jQuery随机选择其中一个元素。
$('.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>