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

Here's a working example with your code

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来处理淡入淡出。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

为什么我的fadeIn不工作？

2 个答案: