html页面之间的平滑过渡答案

【问题标题】：smooth transition between html pageshtml页面之间的平滑过渡
【发布时间】：2011-08-16 00:47:50
【问题描述】：

当我点击一个链接时，例如在 index.html 中，我点击外部“contact.html”的“contact”，我想创建一个平滑的过渡。给我一些提示...

例子：

<a id="map"  href="otherPage.html" target="_self">
     <img src="images/icons/map.png" width="100" height="100">
</a>

我不希望 otherPage.html 立即加载，我希望它看起来非常流畅/缓慢

【问题讨论】：

您可能需要添加更多关于您想要实现的目标的详细信息。你的意思是你想要例如滑动（动画）新页面？类似于这个问题..stackoverflow.com/questions/5630166/…

标签： jquery transition smooth

【解决方案1】：

试试这个

var speed = 'slow';

$('html, body').hide();

$(document).ready(function() {
    $('html, body').fadeIn(speed, function() {
        $('a[href], button[href]').click(function(event) {
            var url = $(this).attr('href');
            if (url.indexOf('#') == 0 || url.indexOf('javascript:') == 0) return;
            event.preventDefault();
            $('html, body').fadeOut(speed, function() {
                window.location = url;
            });
        });
    });
});

【讨论】：

【解决方案2】：

您可能想要使用 ajax 导航系统。
当您单击一个链接时，您会向所需页面发送一个 ajax 请求并将其内容显示到当前页面中（不刷新它）。

这是我使用相同的“平滑导航”技术构建的网站示例：http://www.opisband.ro/

【讨论】：

链接不再起作用。你能分享一个有效的吗？提前谢谢

【解决方案3】：

查看此网站：http://www.marcocali.com/ 以及相关的JS：http://www.marcocali.com/public/js/index.js?v=4

【讨论】：

【解决方案4】：

您可以为此使用 jquery： http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/

将 css 和 js 文件放在你网站的 css 和 js 文件夹中，并在每个页面添加你想要平滑过渡的功能：

    <link rel="stylesheet" type="text/css" title="default" href="css/main.css">
    <script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" src="js/custom.js"></script>

【讨论】：