Question

我试图将jQuery页面转换添加到我的网站并遇到错误消息：

＆＃34;未捕获的TypeError：无法读取属性＆＃39;隐藏＆＃39; of null＆＃34;

jQuery代码

<script type="text/javascript">
var speed = 'medium';

$('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;
            });
        });
    });
});
</script>

我在关闭head标签之前有这个代码。我也尝试过取出身体＆＃39;并将它们全部留作“html＆＃39;因为该标签已加载。它在小提琴中效果很好：http://jsfiddle.net/akashacisne/hu9wW/但在我的网站上根本不起作用？

小提琴说要把它放在头上，为什么它会起作用呢？

是因为我们网站上的html标签是

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

它是否仍然无法定位＆＃39; html＆＃39;？

Answer 1

您需要将jQuery lib放在script标记之前。另外我建议你在html和body中使用display: none：

<!Doctype html>
<html>
<head>
  <style>
     /* html and body hide by default */
     body, html { display: none } 
  </style>
  <script type='text/javascript' src='jquery.min.js'></script> <!-- Load jQuery -->
</head>
<body>
   <p>This shows how to make aesthetically-pleasing page transitions with jQuery.</p>
   <script type="text/javascript">
    var speed= 'slow';
    $(window).load(function() { // When jQuery is loaded and document is ready
        $('html, body').fadeIn(speed, function() { //Show the body and html with effect...
            $('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;
                });
            });
        });
    });
</script>
</body>
</html>

HTML中的元素顺序非常重要。如果您使用jQuery，则需要先声明。另外，我建议您始终在body结束时声明您的脚本，以便之前加载页面。

<强>已更新：如果您不想使用CSS解决方案，hide document时ready可以$(document).ready(function(){ $('body, html').hide(); .....。

body

但这不是一个好的解决方案，因为之后页面可能会显示一个毫秒来隐藏。

更新2 ：当您尝试访问html和undefined时，可能会返回ready，因为页面未完全加载。

将load事件更改为$(window).load(function() {，以便在完全加载页面时调用该事件：

{{1}}

Answer 2

您可以将所有内容包装在div中，然后淡出/淡出该div。

HTML：

<div id="app">
    <!-- ALL YOUR HTML -->
</div>

使用Javascript：

// The speed of one transition (fadeIn or fadeOut).
// Full execution time will be:
// (browser navigation time) + speed * 2;
// You can set this to slow, medium, fast, or number of ms.
var speed = 'slow';

$('#app').hide();
$(document).ready(function() {
  $('#app').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();
      $('#app').fadeOut(speed, function() {
        window.location = url;
      });
    });
  });
});

如果你想编写更好的javascript，你可以缓存你的jQuery对象。

var $ app = $（'＃app'）;

$app.hide();
$(document).ready(function() {
  $app.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();
      $app.fadeOut(speed, function() {
        window.location = url;
      });
    });
  });
});

jQuery页面转换 - 无法定位html？

2 个答案: