Multiple Div jquery动画悬停

我有几个嵌套divs与他们不同的文章。Multiple Div jquery动画悬停

<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() - 在上面的代码中评论过了。但是当我离开鼠标时，我在页面的一半（由于取消的动画）有按钮。

或者也许theres一种方式来做到这一点在CSS？

来源

2012-05-17 Akshat

嗨男人似乎在这里工作：http://jsfiddle.net/Zhuhu/1/让我知道如果这有帮助，并希望我设置为答案！ B） –

它似乎有同样的问题，在div中移动鼠标，但关闭并返回按钮div – Akshat

取下div的onmouseover和onmouseout属性，并取代你的javascript：

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

来源

2012-05-17 07:18:46 scessor

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

这与我想要的完全相同 – Akshat

我相信你应该这样做：

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

它的清洁和简单。

来源

2012-05-17 07:26:13 ubik

的开始，

show()

已被使用的jQuery所以理智避免名称

从与标记是线上移除事件监听器..

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

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

直视切换功能太

来源

2012-05-17 07:31:00

我只使用show来简化代码示例，谢谢 – Akshat

Multiple Div jquery动画悬停

回答

相关问题