使用JQuery实现双重淡入效果

Question

我想使用.fadeIn()使我的动态内容交换看起来更加流畅。但是我得到的是一种我只能描述为双重淡入淡出（淡入、淡出，然后再次淡入）。 我对JS和jQuery API都是新手，所以任何帮助都会感激。 演示页面：http://robert-richter.com/boilerplate/

$('nav a').click(function(e) {
        e.preventDefault() 
        var href = "inc/" + this.href.split('=').pop() + ".php"
        $('.con').hide().load(href).fadeIn; 
        if (href == 'inc/blog.php') {
            document.title = 'Robert-Richter.com | Blog';
            window.location.hash = 'index.php?content=blog';
        } else if (href == 'inc/portfolio.php') {
            document.title = 'Robert-Richter.com | Portfolio';
            window.location.hash = 'index.php?content=portfolio';
        } else if (href == 'inc/lebenslauf.php') {
            document.title = 'Robert-Richter.com | Lebenslauf';
            window.location.hash = 'index.php?content=lebenslauf';
        } else if (href == 'inc/kontakt.php') {
            document.title = 'Robert-Richter.com | Kontakt';
            window.location.hash = 'index.php?content=kontakt';
        } else {
            document.title = 'Robert-Richter.com';
            window.location.hash = '';
        }
        return false;
    });

此外，window.location.hash会在类似于domain/boilerplate/#index.php?content=blog的位置添加一个#。

- Robert Richter

---

你不应该有任何淡入效果，因为你只是在访问函数而不执行函数。应该是 $('.con').hide().load(href).fadeIn(); - jcubic

对于你的第二个问题，这是预期的行为。#被称为“哈希”，因此window.location.hash定义了URL中跟随哈希后面的字符串。 - cfs

SO拥有所有答案。Balint Bako的解决方案应该可行。 - AnaMaria

没错，它完美地运行着。谢谢Balint Bako！仍在寻找URL的解决方案。 - Robert Richter

只是一条注释：我会看一下switch而不是这么多的if else语句。 - putvande

说实话，我从来没有在JS中使用过switch。:S - Robert Richter

Answer 1

试试这个，直到新页面加载后它才会再次显示：

$('.con').hide().load(href, function () {
    $('.con').fadein();
});

- Balint Bako

Answer 2

如果您不想使用哈希，您需要使用历史API，有一些库可以使用它或者使用哈希更改（如果浏览器不支持）像hash.js或history.js。

- jcubic

---

哼，这份文档说它不支持我的IE浏览器和安卓设备。有其他的方法吗？ - Robert Richter

History API 是在没有使用哈希符号的情况下改变 URL 的唯一方式。 - jcubic

你对 https://github.com/browserstate/history.js 和 http://view.jquerymobile.com/1.3.1/dist/demos/widgets/navigation/ 有什么看法？ - Robert Richter