Question

我有几个嵌套的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中有这样做的方法吗？

Answer 1

从onmouseover中删除onmouseout和div属性，并将您的javascript替换为：

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

Answer 2

我相信你应该这样做：

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

它更简洁。

Answer 3

开始，

 show()

已经被jquery使用，所以为了理智而避免使用该名称

删除事件侦听器与标记内联..

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

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

查看切换功能

多个Div Jquery动画悬停

3 个答案: