Fatal编程技术网
  • javascript/
  • Javascript 如何将带有动画的div添加到网页？

Javascript 如何将带有动画的div添加到网页？

javascript jquery html css

Javascript 如何将带有动画的div添加到网页？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,基本上是在屏幕上放一束激光来射杀坏人。就像《太空入侵者》或《加拉加》一样，但当我点击按钮时，似乎无法让激光真正移动。这就是我所拥有的： <html> <body> <div id="container"></div> <button type='button'>click me</button> <div id="laser" style="display: none; background-color:red; wi

基本上是在屏幕上放一束激光来射杀坏人。就像《太空入侵者》或《加拉加》一样，但当我点击按钮时，似乎无法让激光真正移动。这就是我所拥有的：

<html>
<body>
<div id="container"></div>
<button type='button'>click me</button>
<div id="laser" style="display: none; background-color:red; width:100px; height:50px"></div>
<script>
$(document).ready(function()
{
$('button').click(function()
{
    $('#container').append($('#laser'));
    $('#laser').show()
    $('#laser').animate({left:'500px'},5000);
});
)};
</script>


点击我
$（文档）.ready（函数（）
{
$（“按钮”）。单击（函数（）
{
$（“#容器”）。追加（$（“#激光”）；
$（“#激光”）.show（）
$（“#激光”）.animate（{左：'500px'}，5000）；
});
)};

添加
位置：绝对；左：0
到
#laser
并将脚本移动到底部，以便在按钮存在时添加eventListener

为什么我必须添加位置：绝对；左：0并向下移动脚本？它是否尝试在实际创建按钮之前执行脚本？因为我们需要
left
的初始值来设置动画，而且
left
仅在
位置
为
绝对
、
固定
或
相对
时才起作用。哦，现在我明白了。非常感谢^ ^您真的不需要为
left
显式设置初始值。动画从当前
左
值（即使是
自动
）运行到500px。