Использование MouseOver и MouseOut

Question

Привет, ребята, я работаю над своим первым веб-сайтом, и я пытаюсь реализовать скользящее меню, используя jquery.

Это то, что получил до сих пор:

  <a href="javascript:void(0);"onmouseover="ShowBox();" onmouseout="HideBox();"">Show box<a> 
     <script type="text/javascript"> 
     function ShowBox() 
     { 
      $("#SlideMenu").slideDown(); 
     } 
     function HideBox() 
     { 
      $("#SlideMenu").slideUp(); 
     } 
     </script> 

Когда я MouseOver контроль мое меню скользит вниз, но скользит назад автоматически. Что бы я хотел, это дать пользователю время выбора и опции из меню, и если он этого не сделает, я хочу, чтобы меню закрывалось, как только мышь покидает элемент управления.

Любая идея, почему это не работает? Спасибо заранее.

Answer 1

ли ваш материал без встроенного JS, и не забудьте закрыть <a> элемент и использовать готовую функцию

<a id="test">Show box</a> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#test").on({ 
      mouseenter: function() { 
      $("#SlideMenu").slideDown(); 
      }, 
      mouseleave: function() { 
      $("#SlideMenu").slideUp(); 
      }, 
      click: function(e) { 
      e.preventDefault(); 
      } 
     }); 
    }); 
</script> 

FIDDLE

Answer 2

Если вы используете JQuery, это будет правильный путь идти о нем:

<a href="#" id="showBoxHref">Show box</a> 

<script type="text/javascript"> 
    $("#showBoxHref").hover(function() { 
     $(this).slideDown(); 
    }, function() { 
     $(this).slideUp(); 
    }); 
</script> 

(просто копировать/вставить это, и он должен работать)

Answer 3

Как вы используете JQuery Я считаю, что было бы полезно для вас, чтобы использовать что-то подобное:

$("#box").hover(
    function() { 
     //.stop() to prevent propagation 
     $(this).stop().animate({"bottom": "200px"}, "fast");     
    }, 
    function() { 
     $(this).stop().animate({"bottom": "0px"}, "fast");     
    } 
); 

что это будет означать, что в то время как мышь находится над меню, меню будет находиться в открытом положении. Когда мышь выйдет из меню, она закроется. Очевидно, измените id, а также значения CSS анимации в соответствии с вашими потребностями :)!

Вот рабочий пример: http://jsfiddle.net/V3PYs/1/

Answer 4

На самом деле здесь нет проблем - скрипт делает именно то, что вы ему сказали. Тем не менее, из того, что я понимаю, то, что вы хотите для того, чтобы меню оставалось открытым, когда вы покидаете элемент «триггер» , если пользовательская мышь теперь находится над меню. Попробуйте это:

<script type="text/javascript"> 
var timeout=250;//timeout in milliseconds to wait before hiding the menu 
var menuMouseout; 
$(document).ready(function() { 
    $("#trigger").hover(function(){ 
     $("#SlideMenu").slideDown(); 
    }, function(){ 
     menuMouseout=setTimeout("$('#SlideMenu').slideUp();", timeout); 
    }); 

    $("#SlideMenu").hover(function(){ 
     clearTimeout(menuMouseout); 
    }, function(){ 
     menuMouseout=setTimeout("$('#SlideMenu').slideUp();", timeout); 
    }); 
}); 
</script> 

Таким образом, пользователь остается некоторое время после того, как передвигая мышь из элемента триггера, чтобы попасть в меню. Возможно, вам придется поиграть с таймаутом, но это должно сработать. Я тестировал это и, похоже, работаю. Просто убедитесь, что в случае необходимости оберните это в $(document).ready, чтобы убедиться, что все элементы загружены и готовы.

Демо: http://www.dstrout.net/pub/menu.htm