Question

我有一个用php和html编码的网站，某个div将内容显示为包含文件，根据导航菜单中单击的链接。我可以使用jQuery来淡化内容，但我也希望它之前的内容在新内容消失之前淡出。对于淡入淡出我有：

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

此代码在div内，只影响div当然。为了让之前的内容淡出，我需要做什么？这是一个jsfiddle：

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

感谢

Answer 1

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

的index.php？页=家
的index.php？页=接触
的index.php？页=约

我不知道如何控制页面导航之间的淡入淡出（我相信没有）。

由于内容不是很大，您可以使用第一个请求加载每个页面（主页，联系人，关于）的内容，并将页脚中的链接更改为内部/锚点链接。如果用户点击链接，则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>

跳过这将有助于您开始。

JQuery Div淡入淡出变化

1 个答案: