我正在尝试使用jQuery或CSS（或其他方式！）在DIV中包含的php页面上创建淡入淡出或滑动过渡。我四处搜寻，发现了很多淡入淡出过渡的示例，这些实例彼此淡入淡出div或隐藏内容淡入淡出，但是这种情况略有不同。
我有一个DIV，其内容由导航栏控制。选中后，每个页面都可以使用PHP成功地包含在div中，但我想使内容淡入和淡出。
关于如何在页面更改之间进行漂亮过渡的任何想法？
非常感谢
码：
<?php
if (isset($_GET['page']))
$page = $_GET['page'];
else {
$_GET['page'] = 1;
$page = $_GET['page'];
}
?>
然后将页面包含在div中，如下所示：
<div id="content">
<?php switch($page)
{
case "about":
include('includes/about.php');
break;
case "portfolio":
include('includes/portfolio.php');
break;
case "contact":
include('includes/contact.php');
break;
default:
include('includes/home.php');
}
?>
</div>
从导航栏中选择内容：
<ul>
<li><a href="m_index.php?page=home"><img src="" width="32" height="32" alt="Home"/></a></li>
<li><a href="m_index.php?page=about"><img src="" width="32" height="32" alt="About" /></a></li>
<li><a href="m_index.php?page=portfolio"><img src="" width="32" height="32" alt="Portfolio" /></a></li>
<li><a href="m_index.php?page=contact"><img src="" width="32" height="32" alt="Contact Us" /></a></li>
</ul>
参考方案
就像人们在评论中说的那样，您每次都会重新加载整个页面。
您可以使用jQuery.load API加载内容，而不是将其包含在php中。
PHP：
<div id="content">
<?php
// load home by default - the rest will be loaded via AJAX
include("includes/home.php"); ?>
</div>
导航栏的HTML：
<ul id="links">
<li><a href="m_index.php?page=home"><img src="" width="32" height="32" alt="Home"/></a></li>
<li><a href="includes/about.php"><img src="" width="32" height="32" alt="About" /></a></li>
<li><a href="includes/portfolio.php"><img src="" width="32" height="32" alt="Portfolio" /></a></li>
<li><a href="includes/contact.php"><img src="" width="32" height="32" alt="Contact Us" /></a></li>
</ul>
使用jQuery，您可以执行以下操作：
$(document).ready(function() {
$('#links a').click(function(e) {
e.preventDefault(); // we'll get the pages via ajax.
var url = $(this).attr('href'); // use href as url to loag
$.ajax({
url: url,
success: function(data) {
// when ajax is done, fade old content out
$('#content').fadeOut(function() {
$(this).html(data); // replace contents
// fade new content in
$(this).fadeIn();
});
}
});
});
});
我尚未测试jQuery代码，但它应该可以工作（或给您一些想法）。
如果一切顺利，您可能还希望清理php代码。
我收到警告：session_start（）[function.session-start]：无法发送会话缓存限制器-标头已发送（错误输出开始如果我将表单数据提交到其他文件进行处理，则可以正常工作。但是，如果我将表单数据提交到同一页面，则会出现此错误。请建议<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0…
Div单击与单选按钮相同吗？ - php有没有一种方法可以使div上的click事件与表单环境中的单选按钮相同？我只希望下面的div提交值，单选按钮很丑代码输出如下：<input id="radio-2011-06-08" value="2011-06-08" type="radio" name="radio_date&#…
PHP-复选框组 - php我有一个需要发布的表单复选框组。<input type="checkbox" value="true" checked name="chk0[]"> <input type="checkbox" value="false" name=…
AJAX调用只能与$(document).on('click')一起使用 - php我有一个显示数据库条目的表。用户能够为每一行打开一个弹出菜单。选项之一是删除数据库条目，并且该表应通过AJAX调用相应地刷新。只要有人单击#delete-toggle中的table-popup，我就会在HTML页面上进行AJAX调用（table-popup是div，当有人单击每行中存在的表中的table-edit-button时出现的表）： <div …
将输入类型复选框关联到输入类型文本 - php我有一个问题，我需要将输入类型复选框与输入类型文本关联。情况如下：从数据库中提取数据。 PK数据是复选框的值。当复选框选择输入类型的文本时，您可以在其中输入特定数字。现在的问题是，选中所有类型的复选框输入文本都会被激活。我希望通过选择复选框输入，仅启用与复选框相关联的输入。我的HTML代码（此代码创建一个输入复选框，并为数据库中的每个记录输入文本，而我要激活…