jquery анимированные кнопки, которые просто не будут вести себя
-
28-09-2019 - |
Вопрос
Хорошо, у меня есть встроенный список кнопок.
<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;
});
});
Каждый пункт меню имеет фоновое изображение, а затем, когда его завис на фоновое изображение заменяется более высоким изображением. В конечном итоге я пытаюсь построить простое меню, где в MUSICOVER пункт меню отображается, чтобы скользить вверх. Но в действительности jQuery может оживить тогглекласс с славинным. Проблема в том, что этот текущий код не ведет себя правильно.
Он прыгает вверх и вниз, потому что текст движется. Я довольно новый jQuery, чтобы любая помощь очень ценится. Я также загрузил это в http://gasworks.ravennainteraction.com/result/
Спасибо
Решение
Попробуй это (демонстрация):
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');
})
});
});
Не связан с StackOverflow