JQuery Div 在更改时淡入淡出答案

【问题标题】：JQuery Div Fade in and out on changeJQuery Div 在更改时淡入淡出
【发布时间】：2014-01-01 01:54:28
【问题描述】：

我有一个用 php 和 html 编码的网站，并且某个 div 将内容显示为包含文件，这取决于在导航菜单中单击了哪个链接。我可以使用 jQuery 让内容淡入，但我也希望它之前的内容在新内容淡入之前淡出。对于淡入，我有：

    $(document).ready(function(){
    $(".fade").hide(0).delay(0).fadeIn(3000)
    });

这段代码就在 div 中，当然只会影响 div。我需要做什么才能使以前的内容淡出？这是一个jsfiddle：

http://jsfiddle.net/tanusgreystar/vacqz/

谢谢

【问题讨论】：

那么目前您在点击导航链接时有一个新的页面加载？您希望在淡入新请求已加载的内容之前显示上一页的内容吗？
...因为看起来您不是在使用 AJAX 加载新内容
我根本不知道如何使用 Ajax。我想淡出上次请求中的内容并淡入新内容。这是实际网站的链接。 www.lillianlotus.com。它没有淡入淡出，但您可以在左下角看到内容更改的 div。
您使用fadeout 作为应该淡出的div。但为了能够更好地帮助您，我需要了解您对 javascript 的了解程度。我的 php 生锈了，我在文档中找不到 $_GET[...]。它有什么作用？
$_GET 从 switch 语句或 if/else 中“获取”变量 'page' 的值，以便它知道要加载到 div 中的包含文件。我对javascript有点了解，但我是jquery的菜鸟。我知道我需要使用淡出（），但我不知道当 div 检测到内容已更改时要使用的语法淡出。 div 是否有 onchange() 函数？

标签： jquery html include fadeout

【解决方案1】：

这并不容易，因为我不知道可以假设多少知识。目前您有不同的“整页”请求来加载页面：

index.php?page=home
index.php?page=contact
index.php?page=about

我不知道有什么方法可以控制页面导航之间的淡出（我相信没有）。

由于内容不是很大，您可以使用第一个请求加载每个页面（主页、联系人、关于）的内容，并将页脚处的链接更改为内部/锚链接。如果用户点击一个链接，一个 javascript 函数会淡出当前内容并淡入新内容。为了避免显示其他内容，每个周围的 div 在初始加载时都是不可见的。

另一种方法是使用 ajax。而不是加载一个完整的页面，只加载内容。方法是一样的。页脚中的链接附加了一个事件侦听器并加载所需的内容。

以下是一些接近真实的伪代码：

   function OnLinkClicked(anchor){
        $(".content").fadeOut(); // every div with class content gets faded out
        var divId = "#" + anchor;
        $(divId).fadeIn(); // the anchorId is passed into the function 
                           // to fadeIn the new content
   }

页脚的链接可能如下所示

<a href="#home" onclick=OnLinkClicked("home")>home</a>
<a href="#about" onclick=OnLinkClicked("about")>about</a>

这三个页面将被发送到不同div中的页面

 <div id="home" class="content isVisible">... content for home ...</div>
 <div id="about" class="content isHidden">... content for about ...</div>
 <div id="contact" class="content isHidden">... content for contact...</div>

希望这将帮助您入门。

【讨论】：

谢谢，我试试看！