Question

当我将鼠标悬停在“触发器”上时，我正试图制作一个可以很好地滑出的div。它完全出现，然后迅速消失并再次滑出。我似乎无法弄清楚这种行为的原因。

~~如果需要，我可以稍微放一个样品。~~ 测试用例上升here。这种情况发生在除IE6之外的所有主流浏览器上。

HTML：

 <div class='wrap'>
    <div id='navtitle'>
            NAV>>
    </div>
        <div id='nav'>
            <div id='navlist' class='rounded curvyRedraw'>
                <div class='top'><div></div></div>
                <ul>
                    <li><a href='#'>Home</a></li>
                    <li><a href='#'>Singles</a></li>
                    <li><a href='#'>Supplies</a></li>
                    <li><a href='#'>Cart</a></li>
                </ul>
            </div>

        </div>
    </div>

使用Javascript：

 $(document).ready(function (){
$('#navlist').hide();
$('#navtitle').bind("mouseenter", function(){
    $('#navlist').show('slide');
});
$('#nav').bind("mouseleave", function(){
    $('#navlist').hide('slide');
  });

Answer 1

我认为一些问题是由于焦点在div滑出时发生变化，导致处理程序在焦点变化时被调用，尽管我可能错了。这可能是因为jQuery如何处理跨浏览器鼠标事件（并非所有浏览器都具有相同的事件，因此jQuery可能接近它们）。通过应用鼠标事件处理程序来处理单个事件并使用回调来确保在任何给定时间只有一个是活动的，因此不会在它们之间来回切换。注意我必须为隐藏提供明确的方向/速度，否则它就会消失。不知道为什么，虽然它可能与我的示例设置方式有关，但是一旦列表元素的左边缘离开页面，div就会消失。

$(function() {
    $('#navlist').hide();
    $('#navtitle').one('mouseenter', showOnEnter);
});

function showOnEnter() {
    $('#navlist').show('slide', function() {
        $('#nav').one('mouseleave', function() {
            $('#navlist').hide('slide', { direction: 'left' }, 1000,  function() {
                $('#navtitle').one('mouseenter',showOnEnter);
            });
        });
    });
}

Answer 2

看一个例子会很有帮助。第一件事就是＆gt;＆gt;。你删除它们时有什么变化吗？它不应该是一个问题（对于浏览器来说更是一个问题），但我想问一下。

JQuery UI .show（'slide'）没有正确动画

2 个答案: