个人中心
gpt4 book ai didi

jquery - 导航图标出现得太快

转载 作者：行者123 更新时间：2023-11-28 05:50:43 24 4
gpt4 key购买 nike

我想有一个侧边栏菜单，当我点击汉堡菜单时出现，当我点击关闭按钮时消失。问题是，当我点击关闭按钮时，汉堡包按钮出现在侧边栏菜单完全滑出之前，并且叠加层的不透明度淡出太快，我已经更改了叠加层的过渡时间，但它没有改变任何东西 demo 

<!doctype html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="style.css" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
    </head>
    <body>
        <header class="site-header" itemtype="http://schema.org/WPHeader" itemscope="itemscope" role="banner">
            <div class="wrap">
                <nav itemtype="http://schema.org/SiteNavigationElement" itemscope="itemscope" role="navigation">
                    <ul class="menu">
                        <li class="menu-item">
                            <a href="#">Home</a>
                        </li>
                        <li class="menu-item">
                            <a href="#">About</a>
                        </li>
                        <li class="menu-item">
                            <a href="#">Blog</a>
                        </li>
                        <li class="menu-item">
                            <a href="#">Login</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </header>

        <main class="content" itemprop="mainContentOfPage" role="main">
          <main class="content" itemprop="mainContentOfPage" role="main">
                    <section class="row one white">
                        <div class="wrap">
                            <div class="advertisement">

                            </div>
                            <div class="three-fifths first">


                            </div>
                        </div>
                    </section>

                    <section class="row two white">
                        <div class="wrap">
                            <div class="advertisement">

                            </div>
                            <div class="three-fifths first">

                            </div>
                        </div>
                    </section>
                </main>
        </main>

        <footer class="site-footer" itemtype="http://schema.org/WPFooter" itemscope="itemscope" role="contentinfo">
            ...
        </footer>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="script.js"></script>
    </body>
</html>

script.js

$(function() {
    // Insert Responsive Navigation Icon, Close Icon, and Overlay
    // If you have access to your HTML, you should put this directly into your markup.
    $('<div class="responsive-nav-icon" />').appendTo('.row.one');
    $('<div class="responsive-nav-close" />').appendTo('nav');
    $('<div id="overlay" />').insertAfter('footer');

    // Navigation Slide In
    $('.responsive-nav-icon').click(function() {
        $('nav').addClass('slide-in');
        $('html').css("overflow", "hidden");
        $('#overlay').show();
        return false;
    });

    // Navigation Slide Out
    $('#overlay, .responsive-nav-close').click(function() {
        $('nav').removeClass('slide-in');
        $('html').css("overflow", "auto");
        $('#overlay').hide();
        return false;
    });
});

样式.css

.responsive-nav-icon::before,
.responsive-nav-close::before {
    color: #93a748;
    content: "\f0c9";
    font-family: FontAwesome;
    font-size: 22px;
    position: relative;
}

.responsive-nav-close::before {
    color: #93a748;
    content: "\f00d";
    font-size: 18px;
}

.responsive-nav-icon {
    background: #fff;
    line-height: normal;
    padding: 5px 8px 4px;
    top: 5%; left: 5%;
}

.responsive-nav-icon:hover,
.responsive-nav-close:hover {
    opacity: .7;
}

.responsive-nav-close {
    top: 10px; right: 10px;
}

.responsive-nav-icon,
.responsive-nav-close {
    cursor: pointer;
    display: none;
}

#overlay {
    background: 0 0 rgba(0, 0, 0, 0.8);
    display: none;
    height: 100%;
    position: fixed;
    top: 0; left: 0;
    -moz-transition: all 1s linear 0s;
        -webkit-transition: all 1s linear 0s;
        -ms-transition: all 1s linear 0s;
        transition: all 1s linear 0s;
    width: 100%;
    z-index: 90;
}

@media only screen and (max-width: 960px) {
    .responsive-nav-icon,
    .responsive-nav-close {
        display: block;
        position: absolute;
        z-index: 1;
    }

    nav {
      background: #fff none repeat scroll 0 0;
        height: 100%;
        padding: 20px;
        position: fixed;
        top: 0; left: -400px;
        -moz-transition: all 1s linear 0s;
        -webkit-transition: all 1s linear 0s;
        -ms-transition: all 1s linear 0s;
        transition: all 1s linear 0s;
        width: 0;
    }

    nav.slide-in {
        left: 0;
        overflow-y: scroll;
        width: 280px;
        z-index: 100;
    }

    nav .menu-item {
        display: block;
    }
}

最佳答案

它可能看起来像 hack，但我在您的 jQuery 代码中添加了 setTimeout。

// Navigation Slide In
$('.responsive-nav-icon').click(function() {
    $('nav').addClass('slide-in');
    $('html').css("overflow", "hidden");
    $('#overlay').show();
    $('.responsive-nav-icon').hide();
    return false;
});

// Navigation Slide Out
$('#overlay, .responsive-nav-close').click(function() {
    $('nav').removeClass('slide-in');
    $('html').css("overflow", "auto");
    $('#overlay').hide();
    setTimeout(function() { $('.responsive-nav-icon').show() }, 600);
    return false;
});

});

我测试了1000ms，但是汉堡菜单出现的太晚了，500ms是一个妥协。你可以玩它。

此外，当您单击汉堡菜单时，我添加了 $('.responsive-nav-icon').hide();。

关于jquery - 导航图标出现得太快，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37357262/

24 4 0
文章推荐： node.js - JSONSerialization 生成不正确的 JSON 对象。 swift
文章推荐： swift - 使用 CoreML 从模式预测结果
文章推荐： javascript - 使用 angularjs 将一个数组数据添加到另一个数组中
文章推荐： javascript - jQuery 函数不适用于 Hammer.js
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com