Question

我已阅读了您的所有回复，并得出结论，这是一个坏主意。非常感谢，无论如何，多页面都非常简单。

我正在建立一个网站，我不希望页面刷新。我的想法是，根据用户选择的导航链接，我将有3个不同的相同大小的div淡入淡出。

示例代码:( #about是nav div，＃about_main是主div，依此类推）

$('#about a').click(function() {
    $('#portfolio_main, #contact_main').fadeOut('fast', function() {
        $('#about_main').delay(405).fadeIn();
    });
});

//hide all divs that ren't on portfolio link
$('#portfolio a').click(function() {
    $('#about_main, #contact_main').fadeOut('fast', function() {
        $('#portfolio_main').delay(405).fadeIn();
    });
});

$('#contact a').click(function() {
    $('#about_main, #portfolio_main').fadeOut('fast', function() {
        $('#contact_main').delay(405).fadeIn();
    });

});

这被证明是一个问题，因为你可以点击$('#about a') 100次，它将激发100倍。另外，如果我快速点击许多a tags，那么div就会搞砸了。

示例：My Site

我怎样才能让它轻松而美观地淡入淡出？当用户点击它时，有没有办法取消绑定点击？有没有更简单的方法呢？

Answer 1

抛开明显的问题，即以这种方式安排网站的智慧 - 首先，您可能希望为容器设置固定高度，因此您不会在转换之间获得跳跃效果。

关于重叠的动画，你应该看看.stop()

Answer 2

我今天也遇到了类似的问题。我得出的结论是，有时华而不实的效果虽然很有吸引力但却不合适。特别是对于你正在应用效果的东西。我只想重定向到另一个页面。

我不确定您使用的是哪种服务器端语言，但您的页面可以轻松分成多个部分，以便您可以重复使用页眉和页脚，即Asp.net母版页。

Answer 3

虽然我同意罗伯特认为你不应该这样做，但是，如果你被迫这样做，你可以在这里查看这个例子：http://jsfiddle.net/xWu3C/2/

我没有把你的风格带到任何东西，但原则是相同的。

Answer 4

这个问题的标题是“它值得吗？”所以我将解决这个问题而不是问题体系中的“如何”。答案是：不，请不要破坏互联网。

用jquery简单淡入/淡出，值得吗？

4 个答案: