淡入淡出页面域之间的转换

我期望实现2个Web域之间的页面转换效果。一个是mcpixel.co.uk/new，第二个是mcpaper.co.uk。我拥有两个域名。我喜欢它，所以如果单击标题中的链接，页面淡化过渡到新页面，所以页面之间没有任何白色或闪烁。主要使用Javascript编写的程序（使用Javascript/JQuery）（最新撰写）和CSS。淡入淡出页面域之间的转换

Mock Up Page transition. Fade frome one page to the other

<html> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<title> 
    MCPaper - Your Number #1 Minecraft Newspaper 
</title> 
<meta name="description" content="A newspaper with news dedicated to Minecraft!"> 
<link rel="stylesheet" type="text/css" href="css/style.css" /> 
<link rel="stylesheet" type="text/css" href="css/fonts.css" /> 
<script type="text/javascript" src="css/jquery.js"></script> 
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
$('#ip').click(function() { 
     $('.top-network').slideToggle("slow"); 
}); 
}); 
    function toggle() 
    { 
     $('.top-network').slideToggle("slow"); 
    } 
</script> 
</head> 
<?php 
if($_GET['ref']=='network') 
{ 
echo "<body onload='toggle()'>"; 
echo "<center><div class='top-network' id='top-network'>"; 
<a href='http://redstonetor.ch/new/?ref=network'><img src='network/rst-networkicon.png' class="networkicons"></a> 
<a href='http://mcpixel.co.uk/new/?ref=network'><img src='network/mcpixel-networkicon.png' class="networkicons"></a> 
<a href='http://mcpaper.co.uk?ref=network'><img src='network/mcpaper-networkicon.png' class="networkicons"></a> 
echo "</div>"; 
} 
else 
{ 
echo "<body>"; 
echo '<center><div class="top-network" id="top-network" style="display: none;">'; 
<a href='http://redstonetor.ch/new/?ref=network'><img src='network/rst-networkicon.png' class="networkicons"></a> 
<a href='http://mcpixel.co.uk/new/?ref=network'><img src='network/mcpixel-networkicon.png' class="networkicons"></a> 
<a href='http://mcpaper.co.uk?ref=network'><img src='network/mcpaper-networkicon.png' class="networkicons"></a> 
echo "</div>"; 
} 
?> 
    <div class="top"> 
    <div class="top-container"> 
     <div class="ip" id="ip"> 
     <font color='yellow'>Click to see the RedstoneTor.ch Network</font> 
     </div>

这是我的代码，我没有尝试过任何东西，因为我不知道从哪里开始。

来源

2014-02-19 Richard Sparrow

您可以发布一些代码，至少是标题部分，以便我们可以看到您使用的是什么？框架？头div？另一个元素？ –

已添加代码。我没有尝试过任何东西，因为我不知道从哪里开始。我可以做回答者在下面说的，但那不是我想要达到的。 –

你可以做到这一点简单地用JS/jQuery的：在点击事件，淡出页：

$('body').fadeOut('500');

然后重定向到你想要的网址。

这里是一个教程：http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/

来源

2014-02-19 10:15:25

不错，但不是我所追求的。请参阅上面的动画，页面淡入其他，而不是在那里回来。谢谢 –

在点击隐藏当前页面：

$('body').fadeOut('500');

Redirect到新的页面：

window.location.href = "http://stackoverflow.com";

在新页面中隐藏的一切：

<body style="display:none;">

和文字：

$(document).ready(function() { 
    $("body").fadeIn(2000); 
});

但淡出后，你可能会看到一个白色的页面。使用iframe可以实现更好的转换...

来源

2014-02-19 10:37:28 PiTheNumber

再次，尼斯，但不是我以后。请参阅上面的动画，页面淡入到其他页面，而不是返回。谢谢 –

是的，我刚刚添加了一些关于此的内容。您可以使用新页面淡入iframe，或使用ajax加载其他页面。你需要一些[跨域魔术]（http://stackoverflow.com/questions/17874730/how-to-make-cross-domain-request）... – PiTheNumber

淡入淡出页面域之间的转换

回答

相关问题