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>

[JS在屏幕中间移动元素

1 个答案: