Анимировать CSS с помощью jQuery

Question

Итак, у меня есть CSS, который выглядит так:

.dropdown{
position:absolute;  
display: none; 
width: 69%;
background-color: #6f6f6f;
margin-right: 35px;
z-index: 999999999;
padding: 3%;
margin-top: 20px;
}
#nav-menu > li:hover > .dropdown{
display: block;
top:auto;
}

это прекрасно работает, однако я хочу использовать эффект от плагина JQuery ослабления при наведении

Я знаю, что есть функция показа / скрытия jquery, но она не реагирует так же с выпадающим списком (раскрывающийся список не всегда отображается, когда пользователь взаимодействует с ним), как с использованием css, который, кажется, работает каждый раз.

Так что я просто хочу добавить эффект на дисплей: нет; а затем дисплей: блок при наведении. простите, если это легко, мои навыки jquery не велики, и я нигде не мог найти ответ

скрипка

играть на скрипке

Answer 1

DEMO

demo2

Попробуй это

$(document).ready(function () {
$(".menu_right").hover(
  function () {
      $(".dropdown").slideDown();
  },
  function () {
   $(".dropdown").slideUp();
  }
);
});

Надеюсь, это поможет, спасибо

Answer 2

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

$(".dropdown").hover(function(){$(this).fadeIn(100);$(this).fadeOut(500);});

Первая функция сообщает JQuery, что делать при наведении курсора, секунды, что делать, когда вы покидаете ее, независимо от того, сколько дочерних элементов вложено в этот элемент. Очевидно, что этот код не имеет особого смысла, так как вы не можете навести курсор на то, чего нет на экране, вы должны применить метод hover к элементу, который должен реагировать на наведение, и сделать некоторый элемент вложенным в него. появляются.

<div class="dropDownBtn">
  <div class="subelement"></div>
</div>

В этом случае вы можете сделать что-то вроде:

$(".dropdown").hover(function(){$(this).find('.subelement').fadeIn(100);$(this).find('.subelement').fadeOut(500);});