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 Page Transition

1 个答案: