为什么打开浏览器时jQuery无法正常工作/无法显示？

Question

 <!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>

我在浏览器上运行代码，但它没有像预期的那样向下滑动，我做错了什么？ 谢谢。

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动画slideDown() 100％

.slideDown（）方法可对匹配元素的高度进行动画处理。 这会使页面的下部向下滑动，为显示的项目腾出空间。

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

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

将您的代码更改为：

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

然后您会看到它的作用： https : //jsfiddle.net/cqwbtdb1/

为什么打开浏览器时jQuery无法正常工作/无法显示？

问题描述

2 个解决方案

解决方案1
1 已采纳

解决方案2
0 2015-12-05 15:50:34

为什么打开浏览器时jQuery无法正常工作/无法显示？

问题描述

2 个解决方案

解决方案1 1 已采纳

解决方案2 0 2015-12-05 15:50:34

解决方案1
1 已采纳

解决方案2
0 2015-12-05 15:50:34