Question

我似乎无法在chrome或safari上获得简单的淡入效果 - 但它与jsfiddle（Chrome 19.0.1084.56＆amp; Safari 5.1.7）完美配合。我也没有得到任何javascript错误。以前我曾尝试过

$（“＃fade”）。hide（）。fadeIn

在jsfiddle中也可以正常工作但不在我的文件中。有趣的是，当我使用它时，fadeOut可以正常工作。

以下是我的代码 - 它对您有效吗？如果你知道为什么它不适合我，请告诉我！

<html>

<head>

<title>Wheee jQuery!</title>

<!-- jquery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

$("#fade").fadeTo(2000, 1);

</script>

<!-- css -->
<style type="text/css">
#fade{
    width: 150px;
    height: 30px;
    text-align: center;
    color: blue;
    border: 1px dotted blue;
    opacity: 0.3;
}
</style>

</head>

<body>


<div id="fade">
lalala
</div>   

</body>

</html>

Answer 1

默认情况下，JSFiddle选择OnLoad，运行在JavaScript事件中的body.onload面板中找到的代码。另一方面，您的代码运行在标头中展开的代码。要在JSFiddle中模拟这种情况，请选择No Wrap而不是OnLoad，您的代码将突然无法正常工作，就像在您的服务器上一样。

要解决此问题，请将代码包装在

中

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

没有换行的JSFiddle示例：http://jsfiddle.net/3cXvL/1/

另一种解决方案是将代码放在需要影响的div之后。

<div id="fade"></div>
<script>
    $("#fade").fadeIn(2000);
</script>

Answer 2

“使用$(document).ready(function(){/*mycode*/});（传入8个答案）” - 凯文。

适合我。 http://jsfiddle.net/3cXvL/

$(document).ready(function() {
    $("#fade").fadeTo(2000, 1);
});

jQuery fadeTo和fadeIn在除JSFiddle之外的任何地方都不起作用

2 个答案: