Question

我有一个div在页面加载时向下滑动，但我无法弄清楚如何让它在动画时淡入淡出。我尝试了不同的fadIn效果，但似乎没有任何效果。

  $(function(){  // $(document).ready shorthand
  $("#headerWrapper").animate({top: '+=200px'}, 1000).fadeIn();
      }, function() {
  $("#headerWrapper").animate({top: '-=100%'}, 1000).fadeIn();
 });

http://jsfiddle.net/oq83qc7o/

Answer 1

您还应该为不透明度设置动画。所以将它设置为0开始然后当动画运行时它将在动画期间将其更改为1;

 $(function(){  // $(document).ready shorthand
  $("#headerWrapper").animate({top: '0px', opacity: 1}, 1000);
      }, function() {
  $("#headerWrapper").animate({top: '-=100%', opacity: 1}, 1000);
 });

还必须更改一些CSS：

section#headerWrapper {
    background: #000;
    color: #FFF;
    width:100%;
    position:fixed;
    font-size: 30px;
    z-index:1;
    padding-bottom:1em;
    top:-80px;
    opacity: 0;
}

See this fiddle.

Answer 2

大卫琼斯的回答是正确的。但我会在他的回答中添加一些内容。

你的函数没有以你想要的方式工作的原因是因为jQuery的链接功能。如果向初始jQuery对象添加另一个函数，它将按调用顺序执行函数。

实施例

$('#myObject').animate().fadeIn()

首先执行animate（），然后等待它完成并执行fadeIn（）

<强> CSS

#headerWrapper {
    opacity: 0;
    position: fixed;

    width:100%;
    z-index:1;
    padding-bottom:1em;
    /* margin-top:-200px; unnecessary for fixed positioned elements */

    top: -200px;
}

JS（来自David Jones回答）

$(function(){  // $(document).ready shorthand
    $("#headerWrapper").animate({top: '+=200px', opacity: 1}, 1000);
}, function() {
    $("#headerWrapper").animate({top: '-=100%', opacity: 1}, 1000);
});

淡入一个动画div

2 个答案: