Установить временную задержку для меню Bootstrap Hover

Question

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

Вот мой CSS:

@media (min-width: 768px) { 
.navbar-nav .caret { 
display: none; 
} 
.navbar-nav .open ul { 
display: none; 
} 
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus, 
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus { 
color: white; 
background: none; 
} 
.navbar-inverse .navbar-nav > .open > a, 
.navbar-inverse .navbar-nav > .open > a:hover, 
.navbar-inverse .navbar-nav > .open > a:focus, 
.navbar-inverse .navbar-nav > .active > a, 
.navbar-inverse .navbar-nav > .active > a:hover, 
.navbar-inverse .navbar-nav > .active > a:focus { 
color: #969696; 
background: none; 
} 
.navbar-default .navbar-nav > .hovernav > a { 
color: white; 
} 
.navbar-inverse .navbar-nav > .hovernav > a { 
color: #969696; 
} 
.navbar-default .navbar-nav > .hovernav:hover > a, 
.navbar-default .navbar-nav > .hovernav:hover > a:hover, 
.navbar-default .navbar-nav > .hovernav:hover > a:focus { 
color: #333; 
background: transparent; 
} 
.navbar-inverse .navbar-nav > .hovernav:hover > a, 
.navbar-inverse .navbar-nav > .hovernav:hover > a:hover, 
.navbar-inverse .navbar-nav > .hovernav:hover > a:focus { 
color: #fff; 
background: transparent; 
} 
.navbar-default .navbar-nav > li:hover { 
background: #e7e7e7; 
} 
.navbar-inverse .navbar-nav > li:hover { 
background: #080808; 
} 
.navbar-nav .hovernav:hover > .dropdown-menu { 
display: block; 
} 
} 

А вот мой JavaScript:

$(document).ready(function ($, window, delay) { 

    var mq = window.matchMedia('(min-width: 768px)'); 
    if (mq.matches) { 
     $('ul.navbar-nav li').addClass('hovernav'); 
    } else { 
     $('ul.navbar-nav li').removeClass('hovernav'); 
    }; 

    if (matchMedia) { 
     var mq = window.matchMedia('(min-width: 768px)'); 
     mq.addListener(WidthChange); 
     WidthChange(mq); 
    } 
    function WidthChange(mq) { 
     if (mq.matches) { 
      $('ul.navbar-nav li').addClass('hovernav'); 
     } else { 
      $('ul.navbar-nav li').removeClass('hovernav'); 
     } 
    }; 
}); 

Answer 1

Если вы используете jQueriUI, вы можете добавить еще несколько параметров .addClass и .removeClass (doc here).

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