Question

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    $(document).ready(function() {
        $('#top_message').slideDown(300);
      });
    </script>
    <meta charset="utf-8">
    <title>jQuery</title>
    <style type="text/css">
      #top_message {
        height: 50px;
        width: 75%;
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <div id="top_message">
      We can see you're not logged in. Do you want to <a href="#">sign up</a>?
    </div>
  </body>
</html>

＆＃13;

我在我的浏览器上运行代码并且它没有按照意图向下滑动，我做错了什么？感谢。

Answer 1

因为您尝试使用相同的脚本来加载jQuery和您自己的代码。

改为使用两个不同的脚本。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('#top_message').slideDown(300);
  });
</script>

Answer 2

可能是因为您希望slideDown()向内滑动内容（即更改top位置）。

slideDown()将height动画为100％

.slideDown（）方法可以设置匹配元素的高度。这会导致页面的下半部分向下滑动，为显示的项目腾出空间。

持续时间以毫秒为单位;值越高表示动画越慢，而动画越快。可以提供字符串'fast'和'slow'以分别指示200和600毫秒的持续时间。如果提供了任何其他字符串，或者省略了duration参数，则使用400毫秒的默认持续时间。

由于您的元素已经可见，因此从100％更改为100％无效。

将您的代码更改为：

$('#top_message').hide().slideDown(300);

你会看到它的作用：https://jsfiddle.net/cqwbtdb1/

当我打开浏览器时，为什么我的jQuery无法工作/显示？

2 个答案: