如何通过jQuery以过渡动画方式填充div元素

看起来你要给这个绿色渐变的垃圾箱做填充的过渡动画对吧？结合你给出的CSS，咱们可以通过内部填充元素+jQuery动画来实现，具体步骤如下：

1. 完善HTML结构 #

首先给垃圾箱容器添加一个用于展示填充效果的内部元素，这样我们可以通过控制这个元素的尺寸/位置来实现动画：

<div class="trash">
  <div class="trash-fill"></div>
</div>

2. 调整CSS样式 #

基于你现有的.trash样式，补充.trash-fill的初始状态，让它默认隐藏在垃圾箱底部，并且继承垃圾箱的底部圆角，保证视觉统一：

/* 你原有的.trash样式保留 */
.trash {
  background: rgba(64,231,173,1);
  background: -moz-linear-gradient(left, rgba(64,231,173,1) 1%, rgba(68,237,168,1) 24%, rgba(77,248,157,1) 69%, rgba(82,255,151,1) 97%);
  background: -webkit-gradient(left top, right top, color-stop(1%, rgba(64,231,173,1)), color-stop(24%, rgba(68,237,168,1)), color-stop(69%, rgba(77,248,157,1)), color-stop(97%, rgba(82,255,151,1)));
  background: -webkit-linear-gradient(left, rgba(64,231,173,1) 1%, rgba(68,237,168,1) 24%, rgba(77,248,157,1) 69%, rgba(82,255,151,1) 97%);
  background: -o-linear-gradient(left, rgba(64,231,173,1) 1%, rgba(68,237,168,1) 24%, rgba(77,248,157,1) 69%, rgba(82,255,151,1) 97%);
  background: -ms-linear-gradient(left, rgba(64,231,173,1) 1%, rgba(68,237,168,1) 24%, rgba(77,248,157,1) 69%, rgba(82,255,151,1) 97%);
  background: linear-gradient(to right, rgba(64,231,173,1) 1%, rgba(68,237,168,1) 24%, rgba(77,248,157,1) 69%, rgba(82,255,151,1) 97%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40e7ad', endColorstr='#52ff97', GradientType=1 );
  width: 66px;
  height: 80px;
  display: inline-block;
  margin:0 auto;
  position: relative;
  -webkit-border-bottom-right-radius: 6px;
  -webkit-border-bottom-left-radius: 6px;
  -moz-border-radius-bottomright: 6px;
  -moz-border-radius-bottomleft: 6px;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
  /* 新增：隐藏超出容器的填充元素 */
  overflow: hidden;
}

/* 填充元素样式 */
.trash-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0; /* 初始高度为0，完全隐藏 */
  /* 用更深的同色系渐变，和垃圾箱主体区分开 */
  background: linear-gradient(to right, #2dcc96, #36e78f);
  /* 继承底部圆角，保证贴合垃圾箱形状 */
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}

3. 用jQuery实现过渡动画 #

接下来就可以用jQuery的animate()方法来控制.trash-fill的高度，实现从空到满（或者指定比例）的过渡效果。这里给你两个常用场景的示例：

示例1：页面加载时自动填充到100% #

$(document).ready(function() {
  // animate的第二个参数是动画时长（单位：毫秒），数值越大动画越平缓
  $('.trash-fill').animate({
    height: '100%'
  }, 1500);
});

示例2：点击按钮填充到指定比例（比如70%） #

先添加触发按钮的HTML：

<button id="fill-btn">填充垃圾箱</button>

再写jQuery逻辑：

$(document).ready(function() {
  $('#fill-btn').click(function() {
    $('.trash-fill').animate({
      height: '70%'
    }, 1200);
  });
});

额外小技巧 #

• 如果需要清空垃圾箱的反向动画，只需要把height参数改回0即可；
• 要是想让动画更细腻，可以给.trash-fill添加transition: all 0.3s ease，结合jQuery动态修改高度也能实现平滑效果；
• 若要模拟“逐步填充”的效果，可以多次调用animate()，设置不同的高度值和时长。

内容的提问来源于stack exchange，提问作者Developer