Question

我想在鼠标移动时平滑地隐藏和显示导航栏，它可以正常工作，但是显示和隐藏后的时间不起作用，这意味着它不平滑。这是下面给出的代码。在.navHideShow类下，我有我的导航栏。

<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

您可以将show替换为fadeIn，将hide替换为fadeOut吗？

这会给您想要的效果吗？

编辑： 使用通过jQuery CDN提供的该库。

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

Answer 2

您需要使用普通的JQuery（jquery.min.js）库而不是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

尝试使用以下代码，并根据需要更新fadeIn和FadeOut时间。

$("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);
    }
}

隐藏显示动画不起作用

3 个答案: