Меню Jquery вверх и вниз много раз - PullRequest
Новая
       0

Меню Jquery вверх и вниз много раз

1 голос
/ 04 февраля 2011

У меня есть это меню, анимированное с помощью Jquery 

$(document).ready(function() {
            $(".submenu").slideUp(100, function(){
                $(".menu_item").css({overflow:'visible'})
            });
            $(".submenu").css({display:'none'});
            $(".menu_item").hover(function( {
                $(this).stop(true, true).animate({
                    marginTop: "0px"
                }, 300, function() {
                    //if($(".submenu", this).queue().length < 2)
                    $(".submenu", this).slideDown(300);
                });
            }, function() {
                $(".submenu", this).stop(true, true).slideUp(300, function () {
                    $(this).parent().animate({
                        marginTop: "20px"
                    }, 300);
                });
            });
    });

и HTML 

<div id="navigation">

            <a href="" class="single">Home</a>

            <div class="menu_item">Azienda
            <div class="submenu"> 
                <a href="#">Link</a> 
                <a href="#">Link</a> 
                <a href="#">Link</a> 
            </div> 
        </div> 

        <div class="menu_item">Servizi
            <div class="submenu"> 
                <a href="#">Link</a> 
                <a href="#">Link</a> 
                <a href="#">Link</a> 
            </div> 
        </div> 

    </div><!--end navigation-->

, но:

В этом есть небольшая «ошибка»: если вы наводите указатель мыши на раскрывающееся меню более одного раза, меню будет увеличиваться и уменьшаться в зависимости от того, сколько раз вы над ним зависали.

Ответы [ 2 ]

0 голосов
/ 04 февраля 2011

Привет, мне кажется, это работает нормально: 

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
        $(".submenu").slideUp(100, function() {
            $(".menu_item").css({overflow:'visible'})
        });
        $(".submenu").css({display:'none'});
        $(".menu_item").hover(function(){
            $(this).stop().animate({
                marginTop: "0px"
            }, 300, function() {
                $(".submenu", this).stop().slideDown(300);
            });
        }, function() {
            $(".submenu", this).stop().slideUp(300, function () {
                $(this).parent().stop().animate({
                    marginTop: "20px"
                }, 300);
            });
        }
    );

});
</script>
</head>
<body>
<div id="navigation">

            <a href="" class="single">Home</a>

            <div class="menu_item">Azienda
            <div class="submenu"> 
                <a href="#">Link</a> 
                <a href="#">Link</a> 
                <a href="#">Link</a> 
            </div> 
        </div> 

        <div class="menu_item">Servizi
            <div class="submenu"> 
                <a href="#">Link</a> 
                <a href="#">Link</a> 
                <a href="#">Link</a> 
            </div> 
        </div> 

    </div><!--end navigation-->
</body>
</html>
0 голосов
/ 04 февраля 2011

Не вводя в конкретный код, вы можете установить некоторые «переменные состояния», например (псевдокод): 

var is_open = false;
if (mouseover && !is_open) {
    // start_animation and set is_open = true when_finished
}
// Same for closing
....
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...