0

Jquery を使用した次のコードは機能しません。分割はフェードアウトしていません。助けてください

<html>
<head>
<style type="text/css"> 
#fade{    background-color:#abc123;    width:200px;  height:30px; padding:3px; }
</style>

<SCRIPT type="text/javascript"  src="http://code.jquery.com/jquery-latest.js"></SCRIPT>
<script type="text/javascript"> 
$("#animate").click(function() {
    $("#fade").animate(
            {"width": "200px"},
            "fast");
});
</script>
 </head>
 <body>
<div id="fade">Animate Text</div>
</body>
</html>
4

3 に答える 3

2

DOM を参照する jQuery はすべて、ドキュメント対応ハンドラー (DRH) で囲む必要があります。また、DIV をフェードするのではなく、その次元でアニメーション化するだけです。

<script type="text/javascript"> 
$(document).ready(function() {
    $("#animate").click(function() {

または単に

<script type="text/javascript">
$(function() {
    $("#animate").click(function() {

...そうしないと、DOM の準備が整う前に DOM 要素と通信しようとしています。

[編集 - 他の回答が指摘しているように、#animate要素はありません。上記の問題はまだ残っていますが、これが問題の別の原因である可能性があります。]

于 2012-07-06T11:45:06.950 に答える
1

#animateあなたの例には要素がありません！

次のようにコードを変更すると、問題なく動作します。

$("#fade").click(function() {
    $("#fade").animate(
            {"width": "200px"},
            "fast");
});​

jsフィドル

于 2012-07-06T11:45:05.813 に答える
0

使用している .animate 呼び出しは div をフェードしませんが、幅の変更をアニメーション化しようとします。ブロックをフェードするには、次の操作を行います。

$(document).ready(function() {
    $("#fade").click(function() {
        $(this).fadeOut("fast");
    });

    $("#fade").mouseout(function() {
        $(this).fadeIn("fast");
    });
});

編集: マウスアウトを含む完全な例で更新されました。

于 2012-07-06T11:45:20.273 に答える