1

我似乎无法在 chrome 或 safari 上获得简单的淡入效果 - 但它与 jsfiddle (Chrome 19.0.1084.56 & 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>
4

2 回答 2

4

默认情况下，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>
于 2012-06-13T21:52:27.197 回答
2

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

为我工作。http://jsfiddle.net/3cXvL/

$(document).ready(function() {
    $("#fade").fadeTo(2000, 1);
});
于 2012-06-13T21:45:44.123 回答