jquery toggleClass后的不同CSS转换

trnvg8h3 于 2023-10-17 发布在 jQuery

关注(0)|答案(2)|浏览(84)

大家好
我最近做了这支笔https://codepen.io/alexyap/full/MmYvLw/，我被我的导航菜单难倒了。它的工作正常时，它过渡，但看起来只是可怕的时候，它淡出。我就是想不通。

<div id="nav-container" class="hidden">
 <ul>
  <li id="nav1" class="hidden"><a href="#">About</a></li>
  <li id="nav2" class="hidden"><a href="#">Work</a></li>
  <li id="nav3" class="hidden"><a href="#">Contact</a></li>
 </ul>
</div>

.hidden {
  opacity: 0;
  visibility: hidden;
  margin-left: -60%;
}

JS：

$("#nav-container").delay(200).queue(function(n){
      $(this).toggleClass("hidden")
      n()
    })

    $("#nav1").delay(400).queue(function(n){
      $(this).toggleClass("hidden")
      n()
    })

    $("#nav2").delay(600).queue(function(n){
      $(this).toggleClass("hidden")
      n()
    })

    $("#nav3").delay(800).queue(function(n){
      $(this).toggleClass("hidden")
      n()
    })
  })

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

如果我从#nav-container中取出hidden类，它可以正常工作，但当我这样做时，它会阻止我在着陆页上的CTA按钮。我想做的是，在点击菜单按钮变成“X”后，我的导航菜单链接应该一个接一个地过渡出来，就像它过渡时一样，而不必再次将hidden类添加回#nav-container。如果我说的话没道理我很抱歉。英语不是我的母语，但请试着看看我的笔，你会明白我的意思。

jquery

来源：https://stackoverflow.com/questions/43419625/different-css-transition-after-toggleclass

2条答案

按热度按时间

nnt7mjpx1#

一种方法是将transition放入CSS中，并简单地在容器上切换一个类。我们将使用transition-delay属性来处理您想要的顺序计时效果。下面是一个例子。
相关HTML：

<div id="menu-overlay"></div>
<div id="menu-button-container">
  <div id="menu-button">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
<div id="nav-container">
  <ul>
    <li id="nav1"><a href="#">About</a></li>
    <li id="nav2"><a href="#">Work</a></li>
    <li id="nav3"><a href="#">Contact</a></li>
  </ul>
</div>

相关JS：

$('#menu-button').click(function(){
  $('body').toggleClass('showing');
});

赞(0）回复(0）举报 2023-10-17

xesrikrc2#

如果你的意思是转移到移动的屏幕，这些是我用的代码

const header = docment.querySelctor("header");
window.addEventListener ("scroll", function(){
      header.classList.toggle ("sticky", this.window.scrollY > 0);
})

let menu = document.querySelector('#menu-icon');
let navmenu = document.querySelector('.navmenu');

menu.onclick = () => {
      menu.classList.toggle('bx-x');
      navmenu.classList.toggle('open');
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-family: 'Jost', sans-serif;
    list-style: none;
    text-decoration: none;
}
header{
    position: fixed;
    width: 100%;
    top: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 10%;
}
.logo img{
    max-width: 120px;
    height: auto;
}
.navmenu{
    display: flex;
}
.navmenu a{
    color: #474141;
    font-size: 16px;
    text-transform: capitalize;
    padding: 10px 20px;
    font-weight: 400;
    transform: all .42s ease ;
}
.navmenu a:hover{
    color: #EE1C47;
}
.nav-icon{
    display: flex;
    align-items:center;
}
.nav-icon i{
    margin-right: 20px;
    color: #2c2c2c;
    font-size: 25px;
    font-weight: 400;
    transition: all .42s ease;
}
.nav-icon i:hover{
    transform: scale(1.1);
    color: #EE1C47;
}
#menu-icon{
    font-size: 35px;
    color: #2c2c2c;
    z-index: 10001;
    cursor: pointer;
}

<header>
        <a href="#" class="logo"><img src="example.jpg" alt=""></a>

        <ul class="navmenu">
            <li><a href="#">home</a></li>
            <li><a href="#">shop</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>

        <div class="nav-icon">
            <a href="#"><i class='bx bx-search'></i></a>
            <a href="#"><i class='bx bx-user'></i></a>
            <a href="#"><i class='bx bx-cart'></i></a>

            <div class="bx bx-menu" id="menu-icon"></div>
        </div>
    </header>

赞(0）回复(0）举报 2023-10-17

我来回答

jquery toggleClass后的不同CSS转换

2条答案

相关问题

热门标签

最新问答