javascript - jquerymouseenterとfadeTo

Question

マウスが入ると不透明度1に、マウスが出るときに0.5にフェードするようにします。これは私のコードです：

        <script>
    $(document).ready(function(){
        $("#header").mouseenter(function(){
        $("#header").fadeTo('fast', 1);
        });
        $("#header").mouseleave(function(){
            $("#header").fadeTo('fast', 0.5);
    });

    }


    </script>

HTML：

<body>

        <div id="header">
            <h1>Hello!</h1>
            <p>blah blah...</p>
        </div>

</body>

1つのh1と1つのpを含むdivが本体にあります。マウスをその上に移動しても何も起こりません。何か間違えている？

score 1 · Accepted Answer

間違ったインデントは構文エラーを隠します：

$(document).ready(function(){
    $("#header").mouseenter(function(){
        $("#header").fadeTo('fast', 1);
    });
    $("#header").mouseleave(function(){
        $("#header").fadeTo('fast', 0.5);
    });
}); // <= missing parenthesis

それ以外は動作します。0.5は、すべての色の組み合わせで実際には透明ではないことに注意してください。

score 0 · Accepted Answer

cssはどうですか？

#header {
  opacity: .5;
  transition: opacity .3s ease-in-out;
}
#header:hover {
  opacity: 1;
}

必ずすべてのcssベンダープレフィックスを追加してください。これは、jQueryIMOを使用するよりも優れています。ブラウザがサポートしていないtransitionかopacity、大したことではない場合、それが「グレースフルデグラデーション」のすべてです。

javascript - jquerymouseenterとfadeTo

2 に答える 2

Related