为什么我的淡入不起作用？

Question

我已经试图通过使用其他堆栈溢出问题来找出它，但它不会工作。我如何在jquery中准备好第一个动画后动画一些东西(带或不带fadeIn)?

$(document).ready(function(){
        $('div.sky').animate({height: '40em', opacity: '1'},5000, function() {
            $('div.grass').fadeIn({opacity: '1'},5000);
        });
});

脚本在我的HTML文档中。我不知道这是否会出错，'div.sky'工作。

.sky {
background: deepskyblue;
width: 55%;
margin: auto;
opacity: 0;
}
.grass {
    background: lawngreen;
    width: 55%;
    margin: auto;
    opacity: 0;
    height: 5em;
}

Answer 1

下面是一个使用您的代码的工作示例

JS:

$(document).ready(function(){
        $('div.sky').animate({height: '10em', opacity: '1'},5000);
        $('div.grass').delay(5000).fadeIn();
});

CSS更新:

.grass {
    background: lawngreen;
    width: 55%;
    margin: auto;
    display:none;
    height: 5em;
}

fadeIn()适用于display，而不是opacity。

然后我添加一个动画持续时间值的delay()来显示动画完成后的第二个div。

文档:delay(): https://api.jquery.com/delay/

Answer 2

将.animate()替换为.fadeIn()。你已经通过设置opacity来处理渐变了。

$(document).ready(function() {
  $('div.sky').animate({
    height: '40em',
    opacity: '1'
  }, 5000, function() {
    $('div.grass').animate({  // <---- changed to animate here
      opacity: '1'
    }, 5000);
  });
});

.sky {
  background: deepskyblue;
  width: 55%;
  margin: auto;
  opacity: 0;
}
.grass {
  background: lawngreen;
  width: 55%;
  margin: auto;
  opacity: 0;
  height: 5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sky"></div>
<div class="grass"></div>