1

クロムやサファリで機能する単純なフェードイン効果さえ得られないようですが、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あるコードを実行するものを選択しています。一方、コードはヘッダーでラップされていないコードを実行します。JSFiddleでその状況をシミュレートするには、代わりにを選択すると、サーバーと同じように、コードが突然機能しなくなります。JavaScriptbody.onloadNo WrapOnLoad

この問題を解決するには、コードを次のようにラップします。

$(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 に答える