animateIn又一个动画问题

Question

我正在尝试创建两组使用容器设置动画的文本。我希望在页面加载时显示的第一个文本div，从左侧到目标点。第二个文本div我想在第一个文本div之后开始制作动画，由于某些原因，我的片段不起作用？我将在评论部分发布一个jsfiddle。

然而，我的第二个文本div，并不像我想要的那样工作。您可以在第一个文本div中看到，它从左侧开始动画，直到到达目标点。我试图对第二个文本div做同样的事情，但它只会淡入其完全不透明度，并且不会从上到下动画。

有谁知道为什么？

$(function() {
    $("#text_div").animate(
        {left : "37%"}, 500, function() {}
    );
});
function animateIn(divId, callback) {
    $("#text_div2").animate(
        {opacity:1.0},
        {top : "67%"},
        700,
        callback,
        function() {});
}
$("#text_div").animate(
    {opacity:1.0}, 700, 
    function() {
        animateIn("#text_div2");
    }
);

#container {
	margin: 20px 10%;
	height: 300px;
	border: 1px solid black;
	position: relative;
	top: 70px;
}
#text_div {
    max-width: 100%;
    height: 50px;
    position: relative;
    left: 0;
	top: 40%;
	clear: both;
	font-size: 3em;
}
#text_div2 {
    opacity:0;
    top: 0;
    width: 200px;
    height: 100px;
    background-color:#00CCCC;
    font-size: 2em;
    position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
	<div id="text_div">My writing</div>
  <div id="text_div2">Second set</div>
</div>

Answer 1

动画的css属性必须指定为单个对象，在这种情况下，不透明度和最高值

＆＃13;

＆＃13;

$(function() {
  $("#text_div").animate({
    left: "37%"
  }, 500, function() {});
});

function animateIn(divId, callback) {
  $("#text_div2").animate({
      opacity: 1.0,
      top: "67%"
    },
    700,
    callback);
}
$("#text_div").animate({
    opacity: 1.0
  }, 700,
  function() {
    animateIn("#text_div2");
  }
);

＆＃13;

#container {
  margin: 20px 10%;
  height: 300px;
  border: 1px solid black;
  position: relative;
  top: 70px;
}
#text_div {
  max-width: 100%;
  height: 50px;
  position: relative;
  left: 0;
  top: 40%;
  clear: both;
  font-size: 3em;
}
#text_div2 {
  opacity: 0;
  top: 0;
  width: 200px;
  height: 100px;
  background-color: #00CCCC;
  font-size: 2em;
  position: absolute;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
  <div id="text_div">My writing</div>
  <div id="text_div2">Second set</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

animate函数的语法不正确，请将其更改为：

function animateIn(divId, callback) {
    $("#text_div2").animate({opacity:1.0, top : "67%"}, 700);
}

CSS属性应与花括号一起组合为第一个参数：）