html页面之间的平滑过渡

Question

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

例子：

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

我不希望 otherPage.html 立即加载，我希望它显示得非常顺利/缓慢

Answer 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;
            });
        });
    });
});