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 回答