Анимированные кнопки jquery, которые просто не будут себя вести

Хорошо, у меня есть встроенный список кнопок.

<ul id="nav">
   <li class="home"><a href="#">Menu Item</a></li>
   <li class="contact"><a href="#">Menu Item</a></li>
   <li class="about"><a href="#">Menu Item</a></li>
</ul>

.home{
position:absolute;
bottom:0;
background-image:url(../img/menu/single_line.png);
background-repeat:no-repeat;
height:34px;
width:134px;
}
.home_hover{
position:absolute;
bottom:0;
background-image:url(../img/menu/single_line_over.png);
background-repeat:no-repeat;
height:70px;
width:134px;
}

$(document).ready(function(){
 $("#nav .home").mouseover(function(){
        $(this).toggleClass("home_hover").slideToggle("slow");
        return false;
    }).mouseout(function(){
        $(this).toggleClass("home_hover").slideToggle("slow");
        return false;
    });
});

Каждый пункт меню имеет фоновое изображение, а затем при наведении курсора фоновое изображение заменяется более высоким изображением. В конечном счете, я пытаюсь создать простое меню, в котором при наведении курсора пункт меню скользит вверх. Но на самом деле Jquery может анимировать toggleClass с помощью slideToggle. Проблема в том, что этот текущий код работает неправильно.

Он прыгает вверх и вниз, потому что текст движется. Я новичок в Jquery, поэтому любая помощь приветствуется. Я также загрузил это на http://gasworks.ravennainteractive.com/result/.

Благодарность


jquery jquery-animate toggleclass
person TJ Sherrill    schedule 17.06.2010    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте это (демонстрация):

CSS:

#header{
    height:100px;
}

#nav{
    height:34px;
    position:relative;
}

.home{
    position:absolute;
    bottom:0;
    background-image:url(http://gasworks.ravennainteractive.com/result/img/menu/single_line.png);
    background-repeat:no-repeat;
    height:34px;
    width:134px;
}

.home_hover{
    background-image:url(http://gasworks.ravennainteractive.com/result/img/menu/single_line_over.png);
}

Скрипт

$(document).ready(function(){
    $("#nav li").mouseover(function(){
        $(this).addClass('home_hover').stop().animate({ height: '70px'},'slow');

    }).mouseout(function(){
        $(this).stop().animate({ height: '34px'},'slow', function(){  
            $(this).removeClass('home_hover');
        })

    });
});
person Mottie    schedule 18.06.2010
comment
Спасибо за это. Мне нужно немного изменить изображения, но это прекрасно работает. - person TJ Sherrill; 18.06.2010
comment
Поскольку у вас, скорее всего, будет более одной вкладки, могу ли я предложить использовать только одно изображение? Вам вообще не нужно добавлять класс CSS, а затем вы можете обобщить скрипт для работы со всеми вкладками. - person Mottie; 18.06.2010