0

我尝试使用 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>

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

4

1 回答 1

0

如果我正确理解您的问题，您希望导航淡入新内容，而不是链接到不同的页面。在这种情况下，CSS3 或 jQuery 都可以工作，但我会推荐 jQuery，因为它向后兼容浏览器。任何早于 IE 9 的版本都不会解释 CSS3 转换。另外，在 CSS3 中没有检测点击的好方法（参见这个问题），所以无论如何你最终都会在那里使用 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 被动画化。

于 2013-11-04T20:35:53.580 回答