Animate и обработка mouseenter, mouseleave
Все работает прекрасно. Но только один раз. Один mouseenter и один mouseleave. Потом #icon не скрывается при наведении, мигнет один раз и остаётся на месте, как будто срабатывает fadeout(), а потом сразу fadein(). Подскажите в чём может быть проблема?
$(document).ready(function() {
$("#menu").mouseenter(function() {
$("li#icon").fadeOut(200, function() {$("div#menu").animate({width: "200px"}, function() {$(".menu_item").fadeIn();});});
}
);
$("#menu").mouseleave(function() {
$(".menu_item").fadeOut(200, function() {$("div#menu").animate({width: "50px"}, function() {$("#icon").fadeIn()});});
}
);
})
<div class="menu" id="menu">
<nav>
<ul>
<li class="icon" id="icon">|||</li>
<li class="menu_item">главная</li>
<li class="menu_item">о компании</li>
<li class="menu_item">портфолио</li>
<li class="menu_item">контакты</li>
<li class="menu_item">услуги</li>
<li class="menu_item">сделать заказ</li>
</ul>
</nav>
</div>
по задумке при наведении на блок должна скрываться иконка, затем расширяться блок с меню, а после этого появляться в нём элементы. |
WebCafe,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#icon ~ li {
transition: 1s;
opacity: 0;
}
#menu {
width: 50px;
transition: 1s;
transition-delay: .4s;
overflow: hidden;
}
#menu:hover {
width: 200px;
}
#menu:hover #icon ~ li {
opacity: 1;
}
#menu li {
list-style: none;
transition: 1s .4s;
}
#menu:hover #icon {
opacity: 0;
transition-delay: .1s;
}
#menu #icon {
transition-delay: 1.4s;
opacity: 1;
}
</style>
</head>
<body>
<div class="menu" id="menu">
<nav>
<ul>
<li class="icon" id="icon">|||</li>
<li class="menu_item">главная</li>
<li class="menu_item">о компании</li>
<li class="menu_item">портфолио</li>
<li class="menu_item">контакты</li>
<li class="menu_item">услуги</li>
<li class="menu_item">сделать заказ</li>
</ul>
</nav>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 23:24. |