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

【问题标题】：jQuery fadeTo and fadeIn not working anywhere except for JSFiddlejQuery fadeTo 和 fadeIn 除了 JSFiddle 之外在任何地方都不起作用
【发布时间】：2012-06-13 21:42:25
【问题描述】：

我似乎无法在 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>

【问题讨论】：

Use $(document).ready(function(){/*mycode*/}); (incoming 8 answers) 默认情况下，JSFiddle 代码在窗口加载时运行，而不是在展开的头部中运行。
你在 div 渲染之前调用了 fadeTo 方法或者将调用移到 <div id="fade"> lalala </div> 下面或者调用 $(document).ready(function(){}) 里面的方法

标签： jquery google-chrome safari fadein fadeto

【解决方案1】：

默认情况下，JSFiddle 选择了OnLoad，它运行在body.onload 事件中的JavaScript 面板中找到的代码。另一方面，您的代码运行在标头中解包的代码。要在 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>

【讨论】：

希望你的反对意见不是你的，因为当你发表评论时我已经开始玩小提琴了；} 而且最好发布完整的代码以供搜索。
@ChristopherMarshall 不是，我投了你的票，只是懒得自己发布答案。

【解决方案2】：

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

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

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

【讨论】：

应该选择 Kevins 的回答作为接受。欢迎使用 StackOverflow！