Форум

WebCafe · #1 (**permalink**) 20.06.2018, 21:57

Все работает прекрасно. Но только один раз. Один 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>

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

рони · #2 (**permalink**) 20.06.2018, 23:52

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>

Форум

Справочник

Discord чат

Курсы javascript