animateIn 又一个动画问题答案

【问题标题】：animateIn after another animate issuesanimateIn 又一个动画问题
【发布时间】：2016-01-07 06:20:16
【问题描述】：

我正在尝试创建两组使用容器进行动画处理的文本。我想在页面加载时显示的第一个文本 div 并从左侧到目标点。我想在第一个文本 div 之后开始动画的第二个文本 div，由于某种原因，它在我的 sn-p 中不起作用？我会在评论区发一个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>

【问题讨论】：

jsfiddle.net/#&togetherjs=rrL8Hn83AD

标签： javascript jquery html css animation

【解决方案1】：

animate函数的语法不正确，改成这样：

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

CSS 属性应该与花括号一起作为第一个参数:)

【讨论】：

我将它上传到我的网站，第二个文本 div 没有等待第一个 div 完成？你知道为什么吗？ realtorcatch.com/animate_test
您有另一个 animate 函数独立地为您页面上的第一个 div 设置动画
那意味着我应该做什么？
去掉独立动画第一个div的代码
明白了。我想到了。我删除了底部代码，但将函数 animateIn("#text_div2"); 向上移动到第一个块中。谢谢！

【解决方案2】：

动画的 css 属性必须指定为单个对象，在本例中为不透明度和顶部值

$(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");
  }
);

#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>

【讨论】：