Задержка раскрывающегося тайм-аута JQuery при наведении

http://jsfiddle.net/natvk/

Я построил это выпадающее меню, наведите курсор на третье поле и дождитесь появления раскрывающегося списка, затем наведите курсор на автомобили и дождитесь появления второго раскрывающегося списка. Теперь проблема в том, что если я выйду из него, хотя есть задержка, и у меня есть время, чтобы вернуться в меню, он все равно снова вызывает вызов переключателя. меню не остается открытым. как я могу держать его открытым, если пользователь переходит и снова входит в меню?

Помимо кода на js fiddle, пользователь здесь предложил этот код, но с ним меню не вызывается в первую очередь, поэтому ничего не видно, предлагаемый код здесь:

var menu_animation_timeout = null;

$('.ddown').hover(function(){
    clearTimeout(menu_animation_timeout);
    menu_animation_timeout = setTimeout(function(){
    $( this ).children('ul').stop().slideToggle(500,'easeOutBounce');
    }, 500) 

    }, function() {
    clearTimeout(menu_animation_timeout);   
    menu_animation_timeout = setTimeout(function(){
    $( this ).children('ul').stop().slideToggle(500,'easeOutBounce');
    }, 1000)
});

Спасибо,

Ян

Источник

2 ответа

Решение

Вам нужно использовать stop(true) немедленно переместить анимацию к последнему кадру, когда он останавливается. Попробуй это:

$(document).ready(function () {
    //Show then hide ddown menu on hover
    $('.ddown').hover(function () {
        $(this).children('ul').stop(true).delay(500).slideDown(500);
    }, function () {
        $(this).children('ul').stop(true).delay(1000).slideUp(500);
    });
});

Обновленная скрипка

Источник

Вот, пожалуйста: простой непогрешимый сценарий

HTML просто чтобы показать пример. Суть в том, чтобы добавить JavaScript (+jQuery) и добавить в ваш CSS каждый li:hover недвижимость li.hover как это:

#nav li:hover, #nav li.hover {
    /* your css */
}


/* timeout on hover: big menu */
var hoverTimeout; //declare timeout
$('#nav li').hover(function() { //mouse enter

  clearTimeout(hoverTimeout); //remove timeout, we're taking over control
  $('#nav li').removeClass('hover'); //clear all that are hovered
  $(this).parents('li').addClass('hover'); //add class to all our parents

},function() { //mouse leave

  var $this=$(this); //create local copy
  hoverTimeout = setTimeout(function() {
    $this.parents('li').removeClass('hover'); //un-hover all parents
  },1000); //1 second after we remove our mouse

});
@charset "UTF-8";

body {
  background: #aaa;  
}
nav {
  display: table-row;
    padding: 0;
    margin: 0;
    border: 0;
}
    nav a {
        display: block;
        line-height: 1em;
        text-decoration: none;
    }
    #nav, nav li {
        list-style: none;
        margin: 0;
        padding: 0;
    }
#nav {
    position: relative;
    z-index: 597;
    *display: inline-block;
    padding-left: .75rem;
    display: table-cell;
  width: 99%;
}
    #nav li {
        float: left;
        min-height: 1px;
        vertical-align: middle;
    }
    #nav li.hover, #nav li:hover {
        position: relative;
        z-index: 599;
        cursor: default;
    }
    #nav ul {
        visibility: hidden;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 598;
        width: 100%;
        bottom: 0;
        left: 0;
        margin-top: 0;
        text-transform: none;
        min-width: 210px;
    }

    #nav ul .hassubmenu>a:after {
        content: "+";
        float: right;
        width: 10px;
        text-align: center;
    }
    #nav ul .hassubmenu:hover>a:after, #nav ul .hassubmenu.hover>a:after { content: "-" }
        #nav ul ul {
            top: 0;
            left: auto;
            right: -99.5%;
        }
    #nav li.hover>ul, #nav li:hover>ul { visibility: visible }
    #nav ul, #nav {
        list-style-type: none;
        padding-left: 0;
    }
#nav>li {
    padding: .5rem;
    background: #ddd;
    border: #56a0d3 solid 2px;
    border-top: none;
    border-bottom: none;
}
  #nav>li+li { border-left: none }
  #nav>li a {
      color: #000;
      font-weight: 700;
      text-decoration: none;
  }
  #nav>li:hover>a, #nav>li.hover>a { opacity: 1 }
#nav ul li {
    position: relative;
    float: none;
    font-weight: 400;
    background: #fff;
    background: transparent\9;
    background: hsla(0,0,100%,.7);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2ffffff,endColorstr=#b2ffffff);
    zoom: 1;
    padding: 5px 10px;
}
  #nav ul li:nth-child(n) { filter: none }
  #nav ul li:hover, #nav ul li.hover { background: #fff }
    #nav ul li a { line-height: 1.2rem }
    #nav ul li:last-child>a { border-radius: 0 0 3px 3px }
#nav ul li ul li ul li li {
    background: #000;
    background: transparent\9;
    background: rgba(0,0,0,.7);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000,endColorstr=#b2000000);
    zoom: 1;
    border: 10px solid transparent;
    border-top: 1px solid #ddd;
    border-bottom: none;
}
#nav ul li ul li ul li li:nth-child(n) { filter: none }
#nav ul li ul li ul li li:first-child { border-top: none }
#nav ul li ul li ul li li:last-child { border-bottom: none }
#nav ul li ul li ul li li:hover, #nav ul li ul li ul li li.hover { background: #000 }
#nav ul li ul li ul li li a { color: #62a2d6 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
 <ul id="nav">

  <li class="hassubmenu">
   <a href="link">Menu-item</a>

   <ul>
    <li class="hassubmenu">
     <a href="link">Sub-menu-item</a>

     <ul>
      <li>
       <a href="link">Sub-sub-menu-item</a>
      </li>

      <li>
       <a href="link">Sub-sub-menu-item</a>
      </li>

      <li>
       <a href="link">Sub-sub-menu-item</a>
      </li>

      <li>
       <a href="link">Sub-sub-menu-item</a>
      </li>
     </ul>
    </li>

    <li>
     <a href="link">Sub-menu-item</a>
    </li>

    <li>
     <a href="link">Sub-menu-item</a>
    </li>
   </ul>
  </li>

  <li class="hassubmenu">
   <a href="link">Menu-item</a>

   <ul>
    <li class="hassubmenu">
     <a href="link">Sub-menu-item</a>

     <ul>
      <li>
       <a href="link">Sub-sub-menu-item</a>
      </li>

      <li>
       <a href="link">Sub-sub-menu-item</a>
      </li>

      <li>
       <a href="link">Sub-sub-menu-item</a>
      </li>

      <li>
       <a href="link">Sub-sub-menu-item</a>
      </li>
     </ul>
    </li>

    <li>
     <a href="link">Sub-menu-item</a>
    </li>

    <li>
     <a href="link">Sub-menu-item</a>
    </li>
   </ul>
  </li>

  <li class="hassubmenu">
   <a href="link">Menu-item</a>

   <ul>
    <li class="hassubmenu">
     <a href="link">Sub-menu-item</a>

     <ul>
      <li>
       <a href="link">Sub-sub-menu-item</a>
      </li>

      <li>
       <a href="link">Sub-sub-menu-item</a>
      </li>

      <li>
       <a href="link">Sub-sub-menu-item</a>
      </li>

      <li>
       <a href="link">Sub-sub-menu-item</a>
      </li>
     </ul>
    </li>

    <li>
     <a href="link">Sub-menu-item</a>
    </li>

    <li>
     <a href="link">Sub-menu-item</a>
    </li>
   </ul>
  </li>
 </ul>
</nav>

Источник
Другие вопросы по тегам