我有 5 个按钮,当我将鼠标悬停在它们上面时,我想为它们设置动画。我想要的是让按钮向上展开而不是向下展开。 以下是代码: http://jsbin.com/qaqoxipo/1/edit?html,css,js,output
它们看起来像是在向上扩展,但实际上一个按钮正在向下插入其他按钮。 有什么想法吗?
HTML:
<script src="//code.jquery.com/jquery-2.1.0.min.js"></script><div id="big-buttons-container">
<div class="big-button"></div><!--
--><div class="big-button" style="background-color: #bb0b39"></div><!--
--><div class="big-button"></div><!--
--><div class="big-button" style="background-color: #bb0b39"></div><!--
--><div class="big-button"></div>
</div>
CSS:
#big-buttons-container
{
width: 1000px;
height: 180px;
margin: 0 auto;
}
.big-button
{
width: 200px;
height: 180px;
background-color: #D31145;
display: inline-block;
margin-top: 25px;
}
JS:
$(document).ready(function() {
$('.big-button').mouseenter(function() {
$(this).animate({
height: '+=25px',
});
});
$('.big-button').mouseleave(function() {
$(this).animate({
height: '-=25px',
});
});
});
最佳答案
你几乎成功了。
$(document).ready(function() {
$('.big-button').on({
mouseenter: function() {
$(this).animate({
height: '+=25px',
marginTop: '-=25'
});
},
mouseleave: function() {
$(this).animate({
height: '-=25px',
marginTop: '+=25'
});
}
});
});
至少在 Chrome 上的 PS,在动画期间形状的底部有点晃动 - 添加 vertical-align: bottom
到 .big-button
来解决这个问题。
关于jQuery:扩展div高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25162577/