为什么jQuery悬停效果不起作用？

Question

What I need is a smooth hover effect for my dropdown menu.

$(this).find(".dropdown-menu").stop(true, true).delay(200).fadeOut(500); is not working for me. When the mouse out hover, the effect isn't working.

$(document).ready(function () {
    // executes when HTML-Document is loaded and DOM is ready

    // breakpoint and up  
    $(window).resize(function () {
        if ($(window).width() >= 980) {
            // when you hover a toggle show its dropdown menu
            $(".navbar .dropdown-toggle").hover(function () {
                $(this).parent().toggleClass("show");
                $(this).parent().find(".dropdown-menu").toggleClass("show");
                $(this).find(".dropdown-menu").stop(true, true).delay(200).fadeOut(500);
            });

            // hide the menu when the mouse leaves the dropdown
            $(".navbar .dropdown-menu").mouseleave(function () {
                $(this).removeClass("show");
            });
            // do something here
        }
    });
    // document ready  
    //wow.js init
    new WOW().init();
});

Here is my HTML markup. I am using bootstrap 4 latest version. what can I do with a smooth hover effect with jQuery or javascript

<header class="header_area">
    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
        <a class="navbar-brand" href="#">Light House</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="about.html">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="single.html">Single Post</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Pages
                    </a>
                    <div class="dropdown-menu animated fadeIn" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" href="#">Item 1</a>
                        <a class="dropdown-item" href="#">Item 2</a>
                        <a class="dropdown-item" href="#">Item 3</a>
                        <a class="dropdown-item" href="#">Item 4</a>
                        <a class="dropdown-item" href="#">Item 5</a>
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Pages
                    </a>
                    <div class="dropdown-menu animated fadeIn" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" href="#">Item 1</a>
                        <a class="dropdown-item" href="#">Item 2</a>
                        <a class="dropdown-item" href="#">Item 3</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="contact_us.html">Contact Us</a>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0 search_icon" type="submit"><i class="fa fa-search"></i></button>
            </form>
        </div>
    </nav>
</header>

Answer 1

.hover() has two handlers. The mouse IN and the mouse OUT.

If you wish to define something to happen on mouse out, you have to define the handler.

element.hover(mouseenter, mouseleave);

Documentation

So I suggest:

$(".navbar .dropdown-toggle").hover(

  // Mouseenter event handler
  function () {
    $(this).parent().toggleClass("show");
    $(this).parent().find(".dropdown-menu").toggleClass("show");
  },

  // Mouseleave event handler
  function(){
    $(this).find(".dropdown-menu").stop(true, true).delay(200).fadeOut(500);
  }
);

Answer 2

If you wish to use .hover() , this can be done like so:

$(".navbar .navbar-toggler").hover(function(e) {
  $(".navbar .navbar-collapse").addClass("show").fadeIn(500);
}, function(e) {
  $(".navbar .navbar-collapse").removeClass("show").fadeOut(500);
});

This has drawbacks as as soon as you move the mouse to click or select one of the Menu items, it will revert the class and become hidden.

I would advise staying with .click() for all cases. This will work for Mobile and Desktop browsers:

$(".navbar .navbar-toggler").click(function() {
  $(".navbar .navbar-collapse").toggleClass("collapse show");
});

Working Example: https://jsfiddle.net/4gas2aok/4/

If you want to retain the fade, use .fadeToggle() :

$(".navbar .navbar-toggler").click(function() {
  $dropdown.fadeToggle(500).toggleClass("collapse show");
});

Bootstrap CSS addresses a lot of the width issues already, so you should not need to check the Window width, just let bootstrap handle it on it's own.

Full Example: https://jsfiddle.net/4gas2aok/7/