从左/右/上/下动画时淡入 div答案

【问题标题】：Fading in a div while animating from the left/right/top/bottom从左/右/上/下动画时淡入 div
【发布时间】：2017-12-24 00:39:16
【问题描述】：

我正在尝试进行转换，其中设置为“display:none”的 div 淡入并从左/右/上/下移动到页面中心。

我怎样才能让它同时淡入和动画（{left：}）？

我当前的代码首先将其淡入，然后对其进行动画处理。

$("#button" ).click(function(){
$("#text").fadeIn(1000, function(){
    $("#text" ).animate({ "left": "+=50%" }, "slow" )
    })
})

Current JSFiddle

【问题讨论】：

标签： javascript jquery html css animation

【解决方案1】：

使用下面我的 sn-p 中的符号同时为两个参数设置动画。注意：我使用opacity 来制作渐变动画。（动画元素使用position: absolute）

$(document).ready(function() {
  $("#button").click(function() {
    $("#text").animate({
      left: '+=50%',
      opacity: '1'
    }, 1000);
  })
})

#button {
  display: inline-block;
  border-radius: 5px 5px 5px 5px;
  border: 2px solid deepskyblue;
  color: white;
  background-color: black;
  padding: 2px;
  margin: 2px;
}

#text {
  color: deepskyblue;
  font-size: 2vw;
  position: absolute;
  display: inline-block;
  top: 60px;
  opacity: 0;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button">
  Move
</div>

<div id="text">
  Hello there
</div>

【讨论】：

【解决方案2】：

id 为 text 的 div 的位置应该是绝对的。这是你的代码

$(document).ready(function() {
  $("#button").click(function() {
    $("#text").fadeIn(1000, function() {
      $("#text").animate({
        "left": "+=50%"
      }, "slow")
    })
  })
})

#button {
  display: inline-block;
  border-radius: 5px 5px 5px 5px;
  border: 2px solid deepskyblue;
  color: white;
  background-color: black;
  padding: 2px;
  margin: 2px;
}

#text {
  color: deepskyblue;
  fontsize: 2vw;
  position: absolute;
  display: inline-block;
  top: 60px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button">
  Move
</div>

<div id="text">
  Hello there
</div>

【讨论】：