javascript - [JS将元素移动到屏幕中间

Question

我是 JS 初学者，我需要帮助某人完成一项任务，但我陷入困境。 她需要在页面显示时将元素从屏幕外底部移动到屏幕中间。

她尝试了这个，但什么也没发生:

$(document).ready(function(){
  var myimg = $( this ).find(" div ");

//Just trying to move div but nothing
  myimg.animate({transform: 'translateY(150px)'}, 800, 'ease')
})

#first {
  margin-top: 150px;
  margin-left: 170px;
  display: block;
  float: left;
}

#middle {
  margin-top: 150px;
  margin-left: 100px;
  display: block;
  float: left;
}

#last {
  background-color:#F16668;
  margin-top:150px;
  margin-left:100px;
  display:block;
  width:300px;
  height:100px;
  float:left;
}

<div id="first">
  lama
</div>

<div id="middle">
  lama
</div>

<div id="last">
  lama
</div>

你能帮我吗？ 非常感谢!

Answer 1

我希望这可以帮助您了解如何使用 CSS 类和过渡来制作动画。

setTimeout(function () {
  $("#middle").addClass('goUp');
}, 1000); // move up after 1 second


$("#middle").click(function () {
  $(this).toggleClass('goUp');
}); // move on click

div {
  border: 1px solid red;
  position: relative;
  transition: all 0.5s;
}

#middle {
  display: block;
  top: 100px;
}
#middle.goUp {
  top: 0px;
}

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

<div id="middle">Click to move</div>