1包含JQuery库。

Question

我正在尝试制作横幅，其中应该有一些文字从顶部到底部。该代码仅用于测试，以查看它是否正常工作，因此我稍后会对其进行优化。我已经制作了这段代码：

<!DOCTYPE html>
<html>
<head>
<style>
  div.background {
    background: url(banner.jpg) repeat;
    border: 2px solid black;
  }

  div.transbox {
    margin: 30px;
    background-color: #ffffff;
    border: 1px solid black;
    opacity:0.6;
    filter:alpha(opacity=60); 
    width: 200px;
    height: 500px;
  }

  div.transbox p {
    margin: 5%;
    font-weight: bold;
    color: #000000;
  }
  #animation{font-size:20px; margin-top:40px; margin-left:50px;}
</style>

<script>

function loadImage() {
    $("#animation").animate({ marginTop: "300px" }, 1500 ).animate({ marginBottom: "40px" }, 800 );


}


</script>
</head>

<body onload="loadImage()">
    <div class="background">
      <div class="transbox" id="animation">
          <p>Text to fly in</p>
       </div>
    </div>

</body>
</html>

如果我发出警报（＆＃34;测试＆＃34;）;在javascript代码中，我收到警报。但是当我尝试动画时，没有任何事情发生。所以我猜这是javascript中的动画代码，有什么问题吗？谁能看到我做错了什么？

最诚挚的问候 MADS

Answer 1

您在这里使用Jquery只是忘记将其包含在您的代码中： 工作代码：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style>
  div.background {
    background: url(banner.jpg) repeat;
    border: 2px solid black;
  }

  div.transbox {
    margin: 30px;
    background-color: #ffffff;
    border: 1px solid black;
    opacity:0.6;
    filter:alpha(opacity=60); 
    width: 200px;
    height: 500px;
  }

  div.transbox p {
    margin: 5%;
    font-weight: bold;
    color: #000000;
  }
  #animation{font-size:20px; margin-top:40px; margin-left:50px;}
</style>

<script>

function loadImage() {
    $("#animation").animate({ marginTop: "300px" }, 1500 ).animate({ marginBottom: "40px" }, 800 );


}


</script>
</head>

<body onload="loadImage()">
    <div class="background">
      <div class="transbox" id="animation">
          <p>Text to fly in</p>
       </div>
    </div>

</body>
</html>

Answer 2

.animate（）是jQuery函数。您需要包含jQuery库才能使用它。

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

Answer 3

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style>
  div.background {
    background: url(banner.jpg) repeat;
    border: 2px solid black;
  }

  div.transbox {
    margin: 30px;
    background-color: #ffffff;
    border: 1px solid black;
    opacity:0.6;
    filter:alpha(opacity=60); 
    width: 200px;
    height: 500px;
  }

  div.transbox p {
    margin: 5%;
    font-weight: bold;
    color: #000000;
  }
  #animation{font-size:20px; margin-top:40px; margin-left:50px;}
</style>

<script>

function loadImage() {
    $("#animation").animate({ marginTop: "300px" }, 1500 ).animate({ marginBottom: "40px" }, 800 );


}


</script>
</head>

<body onload="loadImage()">
    <div class="background">
      <div class="transbox" id="animation">
          <p>Text to fly in</p>
       </div>
    </div>

</body>
</html>

＆＃13;

Answer 4

1包含JQuery库。

2在`animate`函数中使用绝对值：

$("#animation").animate({ top: 300 }, 1500 ).animate({ top: 40 }, 800 );

为此，您需要将<div class="transbox" id="animation">定位为absolute。

Answer 5

只需在页面标题部分

中包含jQuery lib

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

从上到下飞行文本

5 个答案:

1包含JQuery库。

2在`animate`函数中使用绝对值：

从上到下飞行文本

5 个答案:

1包含JQuery库。

2在animate函数中使用绝对值：

2在`animate`函数中使用绝对值：