Hide Show Animation Not Working

Question

I want to hide and show navbar smoothly on mouse move , it is working but time after show and hide is not working, means it is not smooth. This is the code given below. Under .navHideShow class I have my navbar.

<div class="navHideShow" style="display: none">
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
        <a class="navbar-brand" href="index.html">
            <span class="primarycolor">BIG </span><span 
            class="fontChange">MUSCLE</span>
        </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 ml-auto">
                <li class="nav-item">
                    <a class="nav-link nav-edit" href="#top">HOME <span 
                    class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link nav-edit" href="#about">ABOUT</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link nav-edit" href="#course">COURSES</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link nav-edit" href="#trainers">TRAINERS</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link nav-edit" href="#contact">CONTACT</a>
                </li>
            </ul>
        </div>
    </nav>
</div>

JAVASCRIPT

var myVar;

$("html").mousemove(function (event) {
    $(".navHideShow").show(1000);

    myStopFunction();
    myFunction();
});

function myFunction() {
    myVar = setTimeout(function () {
        $(".navHideShow").hide(1000);
    }, 2000);
}

function myStopFunction() {
    if (typeof myVar != 'undefined') {
        clearTimeout(myVar);
    }
}

Answer 1

You could replace show with fadeIn , and hide with fadeOut ?

Would this give you the desired effect?

EDIT: Use this library provided via jQuery CDN.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

Answer 2

you need to use plain JQuery ( jquery.min.js ) Library instead of jquery-3.3.1.slim.min.js.

 var myVar; $("html").mousemove(function (event) { $(".navHideShow").show(1000); myStopFunction(); myFunction(); }); function myFunction() { myVar = setTimeout(function () { $(".navHideShow").hide(1000); }, 2000); } function myStopFunction() { if (typeof myVar != 'undefined') { clearTimeout(myVar); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="navHideShow" style="display: none"> <nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark"> <a class="navbar-brand" href="index.html"> <span class="primarycolor">BIG </span><span class="fontChange">MUSCLE</span> </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 ml-auto"> <li class="nav-item"> <a class="nav-link nav-edit" href="#top">HOME <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link nav-edit" href="#about">ABOUT</a> </li> <li class="nav-item"> <a class="nav-link nav-edit" href="#course">COURSES</a> </li> <li class="nav-item"> <a class="nav-link nav-edit" href="#trainers">TRAINERS</a> </li> <li class="nav-item"> <a class="nav-link nav-edit" href="#contact">CONTACT</a> </li> </ul> </div> </nav> </div> 

Answer 3

Try to use below code and update the fadeIn and FadeOut time according to need.

$("html").mousemove(function (event) {
    $(".navHideShow").fadeIn(1000);

    myStopFunction();
    myFunction();
});

function myFunction() {
    /*myVar = setTimeout(function () {
        $(".navHideShow").fadeOut('slow',1000);
    }, 2000);*/
    $(".navHideShow").fadeOut(4000,"swing", function () {
        $(".navHideShow").fadeIn(5000,"swing");
    });

}

function myStopFunction() {
    if (typeof myVar != 'undefined') {
        clearTimeout(myVar);
    }
}