Joomla 3.x Меню на Bootstrap 3 плавное появление

Всем привет, подскажите пожалуйста как сделать что бы дочерние меню появлялось плавно? тестовая площадка http://agenstvo.hol.es/
Код который стоит сейчас

Спойлер: JS

Код (CODE):

1. <script type="text/javascript">
2. jQuery(document).ready(function(){
3. jQuery('.parent').addClass('dropdown');
4. jQuery('.parent > a').addClass('dropdown-toggle');
5. jQuery('.parent > a').attr('data-toggle', 'dropdown');
6. jQuery('.nav > .parent > a').attr('data-toggle','#');
7. jQuery('.parent > a').append(' <span class="caret"></span>');
8. jQuery('.parent > ul').addClass('dropdown-menu');
9. jQuery('.nav-child .parent').removeClass('dropdown');
10. jQuery('.nav-child .parent').addClass('dropdown-submenu');
11. jQuery('.dropdown-submenu > a').removeAttr('class');
12. jQuery('.dropdown-submenu > a').removeAttr('data-toggle', 'dropdown');
13. jQuery('.dropdown-submenu > a > span').remove();
14. });
15. </script>

Нашел на просторах интернета код но он видимо не подходит, в JS не силен

Спойлер: JS

Код (CODE):

1. /* ========================================
2.             Joomla3 DropDown Menu
3.    ======================================== */
4.  
5. jQuery(document).ready(function(){
6.    
7.     // Bootstrap Menu-Class
8.     $(document).ready(function(){
9.         // dropdown
10.         $('.nav .parent').addClass('dropdown');
11.         $('.nav .parent > a').addClass('dropdown-toggle');
12.         $('.nav .parent > a').attr('data-toggle','dropdown toggleMenu'); // .toggleMenu for Info dropdown Joomla3
13.         $('.nav .parent > a').append('<span class="caret level1"></span>'); // .caret class one
14.         $('.nav .parent > ul').addClass('dropdown-menu');
15.         // ul and .caret Class .level1 / .level2 / .level3
16.         $('ul.nav').addClass('level1');
17.         $('.nav .parent ul.nav-child').addClass('level2').removeClass('level1');
18.         $('.nav .parent > ul.nav-child ul').addClass('level3').removeClass('level2');
19.         $('.nav .parent > ul.nav-child span.caret').addClass('level2').removeClass('level1');
20.     });
21.  
22.     // Funktion Hovereffect
23.     function menuEffekt(sublevel_ul){
24.         if (!sublevel_ul.length) return;
25.             $(sublevel_ul).find('ul').css({"display" : "none", "visibility" : "visible", "top" : "100%"});
26.             $(sublevel_ul).find('ul ul').css({"display" : "none", "left" : "100%" , "top" : "0"});
27.             $("ul.menu li").hover(function(){
28.                 $(this).find('ul.dropdown-menu').first().stop(true, true).delay(200).fadeIn(500);
29.             },function(){
30.                 $(this).find('ul.dropdown-menu').first().stop(true, true).delay(200).fadeOut(500);
31.             });
32.     };
33.  
34.     $(document).ready(function(){
35.         menuEffekt($("ul.menu li"));
36.     });
37.  
38. });

 

есть такое замечательное цсс свойство transition
пример
box {height: 20px; transition: heght 1s;}
box:hover {height: 40px;}

при наведении на box высота плавно за 1 сек изменится до 40

так же можно и с появлением намутить.. добавить visibility

 

Как можно сделать задержку, что бы при наведении меню некоторое время оставалось открытым?

 

опять же к transition добавляется замечательное свойство transition-delay - задержка анимации

 

Решил вопрос дописанием кода в основной

Код (CODE):

1. <script type="text/javascript">
2. jQuery(document).ready(function(){
3. jQuery('.parent').addClass('dropdown');
4. jQuery('.parent > a').addClass('dropdown-toggle');
5. jQuery('.parent > a').attr('data-toggle', 'dropdown');
6. jQuery('.nav > .parent > a').attr('data-toggle','#');
7. jQuery('.parent > a').append(' <span class="caret"></span>');
8. jQuery('.parent > ul').addClass('dropdown-menu');
9. jQuery('.nav-child .parent').removeClass('dropdown');
10. jQuery('.nav-child .parent').addClass('dropdown-submenu');
11. jQuery('.dropdown-submenu > a').removeAttr('class');
12. jQuery('.dropdown-submenu > a').removeAttr('data-toggle', 'dropdown');
13. jQuery('.dropdown-submenu > a > span').remove();
14. jQuery('ul.nav li.dropdown').hover(function() {
15. jQuery(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn();
16. }, function() {
17. jQuery(this).find('.dropdown-menu').stop(true, true).delay(300).fadeOut();
18. });
19. });
20. </script>