多个 Div Jquery 动画悬停答案

【问题标题】：Multiple Div Jquery Animated Hover多个 Div Jquery 动画悬停
【发布时间】：2012-05-17 07:12:11
【问题描述】：

我有几个嵌套的 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 中做到这一点？

【问题讨论】：

你好人似乎在这里工作：jsfiddle.net/Zarhu/1 让我知道这是否有帮助并希望我设置为答案！ B-)
好像也有同样的问题，在div中移动鼠标但是在按钮div上又关闭又返回

标签： jquery html css

【解决方案1】：

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

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

【讨论】：

"onmouseenter 是 IE 特有的。在其他浏览器中不起作用，除非您使用可以模拟此事件的 jQuery。" stackoverflow.com/a/1638929/246260

【解决方案2】：

我相信你应该这样做：

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

它更简洁。

【讨论】：

【解决方案3】：

开始，

 show()

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

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

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

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

也看看切换功能

【讨论】：

为了简化代码示例，我只使用了 show，谢谢