0

ユーザーがメニューにカーソルを合わせると、メニューをfadein.fadeoutするJavaScriptコードがあります。

JavaScriptフェードインフェードアウトをjQueryフェードインフェードアウトに変換したい。

私がこのことを整理するのを手伝ってください、私はjQueryが欲しいです、なぜならそれはjavascriptのジャークではなくフェードインフェードアウトスタイルでロードされるからです

<style type="text/css">
     #div1 {  
         visibility: hidden;  
     }
</style>

<div onMouseOver="show('div1')" onMouseOut="hide('div1')">
    <div id="div1">
    </div>
</div>

<script>
    function show(id) {
        document.getElementById(id).style.visibility = "visible";
    }
    function hide(id) {
        document.getElementById(id).style.visibility = "hidden";
    }
</script>
4

3 に答える 3

0

フェードアウトは表示をなしに設定します。

これを試して：

$("#div1").hover(
    function() {$(this).animate({opacity:1})}, // fade in
    function() {$(this).animate({opacity:1})}  // fade out
);

ユーザーからのぎくしゃくしたイベントを防ぎたい場合は、hoverIntent プラグインを確認することをお勧めします。

于 2012-07-04T20:26:37.853 に答える
0

jsフィドル

<div id="outer">
    <div id="inner">Test</div>
</div>​

$("#outer").hover(function() {
    $('#inner').fadeIn();
}, function() {
    $('#inner').fadeOut();
});​

<ul>s のようなもう少しセマンティックなものからメニューを作成することをお勧めしますが、

于 2012-07-04T20:28:42.787 に答える
0

これを試して、

$("#div1").hover(
function() {$(this).show('slow')},
function() {$(this).hide('slow')}

);

「slow」の代わりに「fast」または「normal」パラメータを使用できます

詳細については、こちらをご覧ください。

編集

divをホバーするときにハンドカーソルを使用したい場合は、これを試すことができます。

<style>#div1{cursor: pointer}</style>
于 2012-07-04T20:38:37.760 に答える