Подменю Jquery, проблема анимации при наведении / удалении - PullRequest
Новая
       20

Подменю Jquery, проблема анимации при наведении / удалении

1 голос
/ 11 марта 2011

Я делаю меню в jquery.Вы можете увидеть его в http://mywash.dk/testtest/index.html

Подменю, которое отображается с самого начала (под «Hvordan»), является активным меню, поэтому оно всегда должно отображаться (если вы не наводите курсор мыши на другой пункт меню, в этом случаедолжно появиться другое подменю.

Работает нормально, но есть 1 раздражающая ошибка. При переходе от 'Hvad' к 'Hvem' оно быстро отображается и скрывает активное меню перед тем, как показывать меню, которое оно должно.

Есть идеи, почему это так?

Большое спасибо за вашу помощь!

Jquery: 

$(document).ready(function() {

    $('#menu > ul > li:not(.inpath) ul').hide();
    $('#menu .inpath ul').show();
    $('#menu > ul > li:not(.inpath)').hover(
    function() {
        $('ul', this).show("slide", { direction: "left" }, 400);

        if($('#menu li.inpath ul').is(':visible') && $(this).not('#menu ul li')){
          $('#menu li.inpath ul').hide("slide", { direction: "left" }, 400);
        }


    }, function() {
        $('ul', this).hide("slide", { direction: "left" }, 400);

        if($('#menu li.inpath ul').is(':hidden') && $(this).not('#menu ul li')){
            $('#menu li.inpath ul').show("slide", { direction: "left" }, 400);
        }
    });
});

Html: 

<div id="menu">

            <ul>

                <li class="test"><a href="">Hvem</a>
                <ul>
                    <li class="first-item"><a href="index.html">Submenu</a></li>
                    </ul>
                </li>
                <li class="test"><a href="">Hvad</a>
                    <ul>
                    <li class="first-item"><a href="index.html">Produkter</a></li>
                    <li class="activeitem"><a href="cases.html" >Leveringer</a></li>
                    </ul>
                </li>

                <li class="inpath test"><a href="">Hvordan</a>

                    <ul>

                        <li class="first-item"><a href="">Reklame</a></li>
                        <li><a href="">PR</a></li>
                        <li><a href="">Websites</a></li>
                        <li><a href="">Illustrationer</a></li>

                    </ul>

                </li>
                <li class="last-item test"><a href="">Sådan!</a></li>

            </ul>

            <div class="clear"><!--clearfix--></div>

        </div>

1 Ответ

1 голос
/ 11 марта 2011

Ваша проблема вызвана немедленным вызовом действия наведения при выходе или входе в элемент меню.

Плагин hoverIntent - одно из возможных решений вашей проблемы

http://cherne.net/brian/resources/jquery.hoverIntent.html

Обратите внимание, что во втором демонстрационном блоке вы можете перейти с первого на третий блок, не вызывая действие второго блока, даже когда наводите курсор на него.

редактирование: 

<script type="text/javascript">
$(document).ready(function() {
    $('.default').show()
    $('#menu .menuitem').hover(
    function() {
        $('.banner').each(function() {
            $(this).stop(true,true).hide();
        })
        $('ul', this).show("slide", { direction: "left" }, 400);
    }, function() {
        $('ul', this).hide("slide", { direction: "left" }, 400);
        $('.default').delay(500).show("slide", { direction: "left" }, 400);
    });
});
</script>

Я добавил значение по умолчанию и немного изменил некоторые имена классов, что не было действительно необходимым, но я думаю, что вы можете понять это. 

<div id="menu">
    <ul>
        <li class="menuitem"><a href="">Hvem</a>
            <ul class="banner">
                <li class="first-item"><a href="index.html">Submenu</a></li>
            </ul>
        </li>

        <li class="menuitem"><a href="">Hvad</a>
            <ul class="banner">
                <li class="first-item"><a href="index.html">Produkter</a></li>
                <li class="activeitem"><a href="cases.html" >Leveringer</a></li>
            </ul>
        </li>

        <li class="menuitem"><a href="">Hvordan</a>
            <ul class="banner default">
                <li class="first-item"><a href="">Reklame</a></li>
                <li><a href="">PR</a></li>
                <li><a href="">Websites</a></li>
                <li><a href="">Illustrationer</a></li>
            </ul>
        </li>
        <li class="menuitem"><a href="">Sådan!</a></li>
    </ul>
    <div class="clear"><!--clearfix--></div> 
</div>

Подменю Jquery, проблема анимации при наведении / выводе

...