JS实现HTML元素从底部滑入动画效果 - 使用jQuery animate()方法

<div id='box'>Hello World!</div>
<style>
#box {
  position: fixed;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}
</style>
<script>
$(document).ready(function() {
  $('#box').animate({bottom: '20px'}, 500);
});

function showBox() {
  $('#box').animate({bottom: '20px'}, 500);
}
</script>
<p>本文使用jQuery库中的animate()方法实现了HTML元素从底部滑入的动画效果。在JavaScript代码中，定义了showBox()函数，可以调用该函数触发动画效果。</p>