我是使用Jquery的新手。我试图实现的是淡入页面上的任何元素。但是,我的页眉和页脚是通过使用 PHP include() 显示的,我可以将 Jquery 与这种类型的格式一起使用吗?我无法让任何东西淡入()。
<!DOCTYPE html>
<head>
<title> <Header> </title>
enter code here
<script src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
$('#nav').fadeIn(3000);
});
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Films.com</h1>
</div>
<div id="content">
<div id="nav">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="film.php">Film</a></li>
<li><a href="add_film.php">Add a Film</a></li>
</ul>
</div>
你想要淡入的元素需要隐藏,例如
<div id="nav" style="display:none;">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="film.php">Film</a></li>
<li><a href="add_film.php">Add a Film</a></li>
</ul>
</div>
但是,我的页眉和页脚是通过使用 PHP include() 显示的,我可以将 Jquery 与这种类型的格式一起使用吗?
是的。 这种设置是在服务器端发生的,甚至在jQuery看到它之前。 您的服务器端 PHP 代码正在做的是向浏览器发出一个 HTML 页面。 在这一点上,客户端是JavaScript(包括jQuery)运行时。 它看到的只是文档的客户端结果,而不是它在服务器端的构建方式。
我无法让任何东西淡入()
您尝试使用该代码淡入的内容已显示。 它首先需要隐藏起来,然后才能淡入视野。 您可以将其样式设置为隐藏在页面的CSS中:
#nav { display: none; }
这将在页面首次加载时呈现默认隐藏的#nav
元素。 然后你的JavaScript代码会使用jQuery淡入淡出。
[已解决] 试试这个:
http://jsfiddle.net/F6mUn/1/
为了淡入,您必须隐藏相应的内容。
这是代码:
.HTML:
<div id="nav" style="display:none;">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="film.php">Film</a></li>
<li><a href="add_film.php">Add a Film</a></li>
</ul>
</div>
JQuery:
$(document).ready(function(){
$('#nav').fadeIn(5000);
});