如何在JavaScript中通过动画margin实现文本淡入效果？

你当前的margin动画没起作用，核心问题是jQuery animate方法的调用语法错误——animate的第一个参数必须是包含要动画属性的对象，而不是直接传时长和数值。

修正后的完整代码 #

JavaScript

$(window).on("load", function() {
  $(window).scroll(function() {
    var windowBottom = $(this).scrollTop() + $(this).innerHeight();
    
    $(".fade").each(function() {
      var objectBottom = $(this).offset().top + $(this).outerHeight();

      // 元素进入视口时的动画
      if (objectBottom < windowBottom) { 
        if ($(this).css("opacity") == 0) {
          $(this).fadeTo(500, 1);
        }
        // 修正margin动画的调用方式
        if ($(this).css("margin-top") == "50px") {
          $(this).animate({ 'margin-top': '0px' }, 500);
        }
      } else { 
        // 元素移出视口时的反向动画
        if ($(this).css("opacity") == 1) {
          $(this).fadeTo(500, 0);
        }
        if ($(this).css("margin-top") == "0px") {
          $(this).animate({ 'margin-top': '50px' }, 500);
        }
      }
    });
  }).scroll(); 
});

CSS

.fade {
  margin-top: 50px;
  opacity: 0; /* 初始设为透明，配合页面加载时的scroll触发动画 */
  transition: none; /* 避免和jQuery animate冲突 */
}

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="fade">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

关键修改说明 #

1. animate方法修正：把错误的$(this).animate(500, 0);改成$(this).animate({ 'margin-top': '0px' }, 500);，明确指定要动画的CSS属性和动画时长。
2. 补充反向动画：添加元素移出视口时还原margin-top的逻辑，让动画双向生效。
3. 初始样式调整：把.fade的初始opacity设为0，这样页面加载时scroll事件触发后能正确执行淡入动画。

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