如何仅在元素的上半部设置高度动画

Question

如果css说：test，为什么padding:0在这里有填充的顶部和底部？

但是主要问题是-单击按钮上没有数字的高度动画-只是背景动画。

我需要设置数字hieght的动画，但要保持数字的下半部分仍然可见。

即7的上半部分应该删掉。

有可能吗？

$('button').on('click', function(){
let half = $('#test').height() / 2;
$('#test').animate({height: half}, 500);
})

#test{
position:absolute;
font-size:14vw;
font-weight:bold;
background:gold;
margin:0;
padding:0;
}

#btn{
margin-left:54px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='test'>7</div>
<br>
<button id='btn'>CLICK</button>

Answer 1

将overflow-y:hidden;添加到CSS以隐藏溢出区域：

$('button').on('click', function(){
let half = $('#test').height() / 2;
$('#test').animate({height: half}, 500);
})

#test{
overflow-y:hidden;
position:absolute;
font-size:14vw;
font-weight:bold;
background:gold;
margin:0;
padding:0;
}

#btn{
margin-left:54px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='test'>7</div>
<br>
<button id='btn'>CLICK</button>

Answer 2

根据您的需要，您需要从顶部隐藏数字，以便可以在顶部添加覆盖层并增加点击时的高度。这将隐藏数字

我为叠加添加了CSS。如果您需要其他任何更改，请ping me：）

$('button').on('click', function() {
  let half = $('#overlay').height() * 2;
  $('#overlay').animate({
    height: half
  }, 500);
})

#test {
  position: absolute;
  font-size: 14vw;
  font-weight: bold;
  background: gold;
  margin: 0;
  padding: 0;
  overflow:hidden;
}

#btn {
  margin-left: 54px;
}

#overlay {
    z-index: 1;
    position: absolute;
    display: flex;
    width: 100%;
    height: 1px;
    background: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='test'><div id="overlay"></div>7</div>
<br>
<button id='btn'>CLICK</button>

Answer 3

纠正@Azeem Aslam的答案，将覆盖层的高度从1像素增加到#test div大小的一半

$('button').on('click', function() {
  let half = $('#test').height() / 2;
  $('#overlay').animate({
    height: half
  }, 500);
})

#test {
  position: absolute;
  font-size: 14vw;
  font-weight: bold;
  background: gold;
  margin: 0;
  padding: 0;
  overflow:hidden;
  line-height:0.74;
}

#btn {
  margin-left: 54px;
}

#overlay {
    z-index: 1;
    position: absolute;
    display: flex;
    width: 100%;
    height: 1px;
    background: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='test'><div id="overlay"></div>7</div>
<br>
<button id='btn'>CLICK</button>