代码之家 › 专栏 › 技术社区 › Chris Sobolewski

jquery ui.show(“slide”)未正确设置动画

google-chrome jquery-ui

Chris Sobolewski · 技术社区 · 16 年前

我想做一个当你鼠标滑过一个“触发器”的时候可以很好地滑出来的分区。它完全出现,然后迅速消失,再次滑出。我似乎不明白这种行为的原因。

~~如果需要的话,我可以放一点样品。~~ 测试用例已启动 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');
  });

2 回复 | 直到 16 年前

tvanfosson 16 年前

我认为有些问题是由于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);
            });
        });
    });
}

Tom 16 年前

这将有助于看到一个例子。首先突出的是>>。移除它们时有什么变化吗?这不应该是一个问题(对于浏览器来说更是一个问题),但我想我会问。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Nuñito Calzada · JQuery在spring boot和Thymelaf中从DB自动完成

2 年前

Connor · 使用jquery UI幻灯片制作周围动画

2 年前

provance · 如何获得最新版本的jquery ui?

2 年前

Akhilesh · 当数据目标中有分号或冒号时,带有展开的aria的Button元素不展开

3 年前

chris loughnane · 使用jQuery UI滑块移动和缩放svg元素时遇到问题?

8 年前

Tirkesh Turkesh · 如何在可拖放div中释放项目的精确位置元素上拖放

8 年前

ferralucho · Hightlight jquery datepicker标头选定的星期几

8 年前

Paili · 如何在jQuery自动完成中添加其他内容?

8 年前

monu · 动态嵌套选项卡创建

8 年前