1

jquery を使用してツールチップを作成しました。しかし、初めて（ページが適切にロードされた後）、500（ミリ秒だと思いますか？）の遅延を適用した場合でも、ツールチップは遅延なく表示されます。どうしてこうなるのか。

<html>
<head>
    <script src="file://C:/Users/Admin/Desktop/jquery-1.8.3.min.js"></script>
    <script>
        $(document).ready(function(){
            $("input").focus(function(){
                $("#div").fadeIn(500).css("background-color","#B0B0B0");
            });
            $("input").blur(function(){
                $("#div").fadeOut(500).css("background-color","#B0B0B0");

            });
            $("input").keyup(function(){
                $("#div").html($("input").val());
            });
        });
    </script>
</head>
<body>
    <div style="width:150px">
        <input type="text" style="width:100%;border-radius:4px;border:1px solid #808080;padding:1%;font-family:calibri"/>
        <div id="div" style="color:#FFF;font-family:calibri;min-height:20px;border-radius:4px;padding:1%;word-wrap:break-word"></div>
    </div>
</body>

4

4 に答える 4

3

最初は で非表示にする必要がありますdisplay:none。

style="display:none";

次に、アニメーションで表示します。

<div id="div" style="display:none;color:#FFF;font-family:calibri;min-height:20px;border-radius:4px;padding:1%;word-wrap:break-word"></div>

プログレッシブエンハンスメントのためにJavascriptを介して隠す方が良いこの回答を参照してくださいが、理論は同じです。

于 2013-01-10T20:43:21.593 に答える
1

非表示にしておらず、すでに表示されているためです。

次の行をドキュメント準備機能のスクリプトに追加します。

$("#div").hide();
于 2013-01-10T20:43:36.697 に答える
1

まず隠します。このようにJSを使用して行うことをお勧めします

$("input").focus(function(){
    $("#div").hide()
    $("#div").fadeIn(500).css("background-color","#B0B0B0");
});

このように、ユーザーが JS を無効にしている場合でも、フェードイン効果なしで div が表示されます。

于 2013-01-10T20:44:35.580 に答える
0

項目を表示なしに設定し、ページの読み込み時に項目に対しても fadeIn(500) を作成します。

さらに、jquery のクリーンアップを検討する必要があります。例：

$(window).on('load',function(){
    var $div = $('#div');

    $('input').on({
        focus: function(){
            $div.fadeIn(500).css({backgroundColor:"#B0B0B0"});
        },
        blur: function(){
            $div.fadeOut(500).css({backgroundColor:"#B0B0B0"});
        },
        keyup: function(){
            $div.html($(this).val());
        },
        load: function(){
            $div.fadeIn(500);
        },
    });
});

テストされていませんが、それらの線に沿った何かが機能するはずです。

于 2013-01-10T20:51:19.723 に答える