Question

这是我的HTML代码（我把重要的部分）：

<div id = "about" style = "display:none;">
<h2>About Us</h2>
<p>Objective: To teach and use skills in relation to creating games.</p>
<p>Where: CAT 145</p>
<p>When: Monday's at 6:30pm</p>
</div>

这是我的JavaScript代码：

window.onload = function() {
    fadingIn();
};

function fadingIn() {
    //jQuery
    $(function() {
        $('#about').fadeIn('slow'); //fades in the text
    });
}

当我在另一个页面上执行完全相同的JavaScript代码（我复制并粘贴）时，它工作正常，但由于某些原因，在此页面上它无法正常工作。

Answer 1

为什么你在一个函数里面有一个ready函数，它在一个窗口加载函数中被再次调用..（我认为如果fadeIn()只是你正在做的事情那是不必要的..）它应该工作..

在Windows加载时调用fadeIn

window.onload = function() {
   $('#about').fadeIn('slow'); //fades in the text
};

或

在文档就绪时调用淡入

$(function() {
    $('#about').fadeIn('slow'); //fades in the text
});

Answer 2

你有here的确切答案建议的行为是使用hide（）而不是display：none

Answer 3

可能会有所帮助......试试吧

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").fadeOut()
  });
  $(".btn2").click(function(){
    $("p").fadeIn();
  });
});
</script>
</head>
<body>

<p>This is a paragraph.</p>
<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>

</body>
</html>

Answer 4

如果您使用document.ready（或$(function() { ... });），则不需要使用window.onload，因为load事件的发生时间晚于document.ready （例如，当所有图片都已加载时）并且您无法以这种方式捕捉document.ready，因为您在ready事件发生后创建了处理程序。

这样您的选择就是只使用document.ready：

function fadingIn() {
    //jQuery
    $(function() {
        $('#about').fadeIn('slow'); //fades in the text
    });
}
fadingIn();

或仅使用window.onload：

window.onload = function() {
    fadingIn();
};

function fadingIn() {
    //jQuery
    $('#about').fadeIn('slow'); //fades in the text
}

这是excerpt from jQuery documentation同样的说法：

.ready（）方法通常与<body onload="">属性不兼容。如果必须使用load，请不要使用.ready（）或使用jQuery的.load（）方法来附加load事件处理窗口或更具体的项目，如图像。

Answer 5

您无需编写window.onload功能。您可以在Jquery DOM准备就绪。

$(function () {
    $('#about').fadeIn('slow'); //fades in the text
});

Answer 6

试试这个：

<html>
<head>
<script type='text/javascript' src='//code.jquery.com/jquery-1.10.1.js'></script>
<script type='text/javascript'>
function fadingIn(){
    $(function() {
        $('#about').fadeIn('slow');
    });
}
function fadingOut(){
    $(function() {
        $('#about').fadeOut('slow');
    });
}
fadingIn();
</script>
</head>
<body>
<div id = "about" style="display:none;">
<h2>About Us</h2>
<p>Objective: To teach and use skills in relation to creating games.</p>
<p>Where: CAT 145</p>
<p>When: Monday's at 6:30pm</p>
</div>
<button onclick="fadingIn()">fadingIn</button>
<button onclick="fadingOut()">fadingOut</button>
</body>
</html>

FIDDLE：http://jsfiddle.net/d59uH/1/

jQuery fadeIn（）方法不起作用？

6 个答案: