0

ネストされた div がいくつかあり、その中にさまざまな記事があります。

<div id="maindiv" onmouseover="showbuttons()" onmouseout="hidebuttons()">
    <div style="float: left"></div>
    <div style="float: right">
         <div id="buttons"></div>
    </div>
</div>

function show() {
    $('#buttons').slideDown('fast')
    //$('#buttons').stop().slideDown('fast')

}

function hide() {
    $('#buttons').slideUp('fast')
    //$('#buttons').stop().slideUp('fast')

}

問題は、ホバーイベントが数回発生すると思うので、ボタンが消えて再表示され続けることです。だから私は追加しましたstop()-上記のコードでコメントされています。しかし、マウスを離すと、（アニメーションがキャンセルされたため）ページの途中にボタンがあります。

あるいは、CSS でこれを行う方法はありますか?

4

3 に答える 3

2

onmouseoverから属性とonmouseout属性を削除しdiv、javascript を次のように置き換えます。

$('#maindiv').hover(
    function() {
        $('#buttons').stop().slideDown('fast');
    },
    function() {
        $('#buttons').stop().slideUp('fast');
    }
);
于 2012-05-17T07:18:46.283 に答える
1

次のようなことをすべきだと思います：

$('#maindiv').hover(function() {
    $('#buttons').stop().slideDown('fast')
}, function() {
    $('#buttons').stop().slideUp('fast')
})

よりクリーンでシンプルです。

于 2012-05-17T07:26:13.340 に答える
0

始めに、

 show()

すでにjqueryで使用されているため、健全性のためにその名前は避けてください

マークアップとインライン化されないようにイベントリスナーを削除します..

  $("#maindiv").mouseover( function() {
    $("#buttons").stop(true, true).slideUp();
   });

  $("#maindiv").mouseout( function() {
    $("#buttons").stop(true, true).slideDown();
   });

トグル機能も調べてください

于 2012-05-17T07:31:00.460 に答える