jQuery页面转换但保持“在新选项卡中打开”

Hy there, I noticed several pages with a pretty sweet page transition (one example: semplice)

在那里,我注意到几个页面有一个非常甜蜜的页面过渡(一个例子:semplice)

if you click the navigation the page fades out, reloads and fades back in. Now I tried to create something on my own. I created the effects for the fadeIn and the fadeOut. Then I created something like this:

如果你单击导航页面淡出,重新加载并淡入。现在我尝试自己创建一些东西。我为fadeIn和fadeOut创建了效果。然后我创建了这样的东西:

$(function(){
    fadeInbody();
    $('ul#navi li a').click(function(e) {
        e.preventDefault();
        newLocation = this.href;
        fadeInbody(function(){
            window.location = newLocation;  
        });
    });
});

Actually that works quite good for the normal left-click.

实际上,这对于正常的左键单击非常有用。

But now I have a mousebutton that opens the link automatically in a new tab. I use this button quite a lot. In this case because of the e.preventDefault(); it breaks this behaviour and opens the page the same tab.

但现在我有一个鼠标按钮,可以在新选项卡中自动打开链接。我非常使用这个按钮。在这种情况下,因为e.preventDefault();它打破了这种行为,并打开相同的选项卡页面。

Is there a better to create something like this without breaking the default behaviour? (In the semplice-example the new tab mousebutton works)

有没有更好的创建这样的东西而不破坏默认行为? (在semplice-example中,新标签鼠标按钮有效)

1 个解决方案

#1

You can check which button the user has clicked in the event's which property.

您可以检查用户在事件的哪个属性中单击了哪个按钮。

So, your code would look like this:

所以,你的代码看起来像这样:

$(function(){
    fadeInbody();
    $('ul#navi li a').click(function(e) {
        if (e.which == 1) {
            e.preventDefault();
            newLocation = this.href;
            fadeInbody(function(){
                window.location = newLocation;  
            });
        }
    });
});

You basically run your fade logic when the user clicks with the left button.

当用户使用左键单击时,您基本上运行淡入淡出逻辑。

See comments below the question for cross-browser compatibility info.

有关跨浏览器兼容性信息,请参阅问题下方的注释。

#1