javascript - Div 页面过渡

Question

我尝试用 div 内容制作一个过渡淡入淡出页面，这是我的水平标题菜单

<ul id="navigation" class="select">
    <div id="teste">
            <li><a id="link-home" href="#home">Home</a></li>
    <li><a id="about" href="#about">about</a></li>
    <li><a id="contact" href="#contact">contact</a></li>
    </div>

这是内容的例子

<div id="home">
      <h2>this is home</h2>
</div>
<div id="about">
      <h2>this is about</h2>
</div>
<div id="contact">
      <h2>this is contact</h2>
</div>

我需要 #home 显示主页，其他隐藏的，当您单击链接以使用淡入淡出效果到下一页时(在 div 中就是这种情况)。 什么是最好的方法？ css3 还是 jquery？或两者？有人可以帮我制作这个脚本吗？

Answer 1

如果我对您的问题的理解正确，您希望导航淡入新内容而不是链接到不同的页面。在那种情况下，CSS3 或 jQuery 都可以，但我会推荐 jQuery，因为它是浏览器向后兼容的。 IE 9 之前的任何版本都不会解释 CSS3 转换。另外，在 CSS3 中没有检测点击的好方法(请参阅 this question )，因此无论如何您最终都会在那里使用 jQuery。这是代码:

菜单:

<ul id="navigation" class="select">
    <div id="test">
        <li><a id="link-home" href="#">Home</a></li>
        <li><a id="link-about" href="#">about</a></li>
        <li><a id="link-contact" href="#">contact</a></li>
    </div>
</ul>

内容:

<div id="home">
      <h2>This is home.</h2>
</div>
<div id="about">
      <h2>This is about.</h2>
</div>
<div id="contact">
      <h2>This is contact.</h2>
</div>

jQuery:

$(document).ready(function () {
    var animTime = 600;
    $("#about").hide();
    $("#contact").hide();
    $('#link-home').click(function() {
        $("#about").fadeOut(animTime);
        $("#contact").fadeOut(animTime);
        $("#home").delay(animTime).fadeIn(animTime);
    });
    $('#link-about').click(function() {
        $("#home").fadeOut(animTime);
        $("#contact").fadeOut(animTime);
        $("#about").delay(animTime).fadeIn(animTime);
    });
    $('#link-contact').click(function() {
        $("#home").fadeOut(animTime);
        $("#about").fadeOut(animTime);
        $("#contact").delay(animTime).fadeIn(animTime);
    });
});

这应该适用于您已有的任何代码。只需确保您在标记中的 ID 与 jQuery 中的 ID 相匹配，您就可以开始了。如果要调整淡入淡出时间，只需更改animTime 的值即可。此数字以毫秒为单位测量动画时间。动画实际花费的时间将是 animTime 的两倍，因为其他 div 被动画化，然后新的 div 被动画化。