JQuery помочь с скользящим слайд-меню - PullRequest
Новая
       18

JQuery помочь с скользящим слайд-меню

2 голосов
/ 14 марта 2011

У меня есть этот код, написанный на jQuery, для простого простого всплывающего меню. Это работает, однако иногда очень нервно. Когда вы наводите курсор мыши на определенное место или немного быстрее, он будет открываться / закрываться и мерцать ... не знаете, как это исправить?

Вот мой текущий код: 

this.navLi = jQuery('nav ul li').children('ul').css("display","block").hide().end();
this.navLi.hover(function() {
    // mouseover
    jQuery(this).find('> ul').stop(true, true).slideDown(100);
}, function() {
    // mouseout
    jQuery(this).find('> ul').stop(true, true).slideUp(100);
});

Ответы [ 2 ]

3 голосов
/ 14 марта 2011

Я рекомендую вам попробовать плагин hoverIntent .Это хорошо работает для таких вещей.

Вот пример jsFiddle .Он очень хорошо вписывается в то, как вы настроили свой код.

И просто обратите внимание, ваш первый селектор ищет тег <nav>, это правильно?

Пример
HTML 

<div id="nav">
    <ul>
        <li class="head">
            First
            <ul>
                <li>1.1</li>
                <li>1.2</li>
            </ul>
        </li>
        <li class="head">
            Second
            <ul>
                <li>2.1</li>
                <li>2.2</li>
            </ul>
        </li>

    </ul>
</div>

Javascript 

jQuery(function() {
    this.navLi = jQuery('#nav ul li').children('ul').css("display","block").hide().end();
    this.navLi.hoverIntent(function() {
        // mouseover
        jQuery(this).find('> ul').slideDown(100);
    }, function() {
        // mouseout
        jQuery(this).find('> ul').slideUp(100);
    });
});

CSS 

#nav, #nav ul { list-style: none; }
#nav, #nav * { padding: 0; margin: 0; }
li.head { width: 100px; float: left; border: 1px black solid; }
0 голосов
/ 14 марта 2011

Это эффект секунды true (параметр) в методе stop, из документации:

.stop ([clearQueue], [jumpToEnd])
clearQueueA Логическое значение, указывающее, следует ли также удалять анимацию в очереди.По умолчанию false. jumpToEndA Логическое значение, указывающее, следует ли немедленно завершить текущую анимацию.По умолчанию false.

Просто удалите второй параметр и посмотрите, хотите ли вы этого.

...