Question

我正在尝试将div设置为＆＃34; display：none＆＃34;淡入并从左/右/上/下移动到页面的中心。

如何让它同时淡入和动画（{left：}）？

我当前的代码首先将其淡入，然后为其设置动画。

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

Current JSFiddle

Answer 1

带有ID 文字的 div 的位置应该是绝对的。这是你的代码

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

使用下面我的代码段中的表示法同时为两个参数设置动画。注意：我使用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>

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

2 个答案: