如何在JQuery中為addClass / removeclass設置動畫

Question

我正在嘗試做菜單。 當用戶向下滾動菜單消失時，向上滾動時再次出現。 我在添加動畫效果時遇到問題。 我不希望菜單立即消失，但是需要一些時間。 我嘗試使用動畫功能，但無法正常工作。

謝謝。

<body>
  <nav class="site-navbar">
  </nav>
</body>

body {
  height:300vh;
  width:100%;
  background-color:yellow;
  margin:0;
  padding:0;
    .site-navbar {
      width:100%;
      height:40px;
      background-color:red;
      position:fixed;
      top:0px;
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease

  }
    .nav-up {
      top:-40px;
    }
}


        var prevScroll = 0;
                $(document).scroll(function() {
            var currentPos = $(this).scrollTop(); 
            if(currentPos > prevScroll) {
               $('nav').removeClass('site-navbar').addClass('nav-up');
  }
            else {
                $('nav').removeClass('nav-up').addClass('site-navbar');
            }

            prevScroll = currentPos;

        })

https://jsfiddle.net/m6r8z8wp/2/

Answer 1

在添加新的FIDDLE之前無需刪除類

var prevScroll = 0;
$(document).scroll(function() {
    var currentPos = $(this).scrollTop(); 
    if(currentPos > prevScroll) {
    $('nav').addClass('nav-up');
    } else {
        $('nav').removeClass('nav-up').addClass('site-navbar');
    }
    prevScroll = currentPos;
});

如果刪除該類，則也會刪除過渡

Answer 2

演示

 var prevScroll = 0; $(document).scroll(function() { var currentPos = $(this).scrollTop(); if (currentPos > prevScroll) { $('nav').slideUp("slow", "linear"); } else { $('nav').slideDown("slow", "linear"); } prevScroll = currentPos; })

 body { height: 300vh; width: 100%; background-color: yellow; margin: 0; padding: 0; } .site-navbar { width: 100%; height: 40px; background-color: red; position: fixed; top: 0px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="site-navbar"> </nav>

或者您可以使用jquery slideUp（） / slideDown（）進行動畫制作

如何在JQuery中為addClass / removeclass設置動畫

問題描述

2 個解決方案

解決方案1
2 已采納 2017-07-20 10:15:28

解決方案2
0 2017-07-20 10:26:37

如何在JQuery中為addClass / removeclass設置動畫

問題描述

2 個解決方案

解決方案1 2 已采納 2017-07-20 10:15:28

解決方案2 0 2017-07-20 10:26:37

解決方案1
2 已采納 2017-07-20 10:15:28

解決方案2
0 2017-07-20 10:26:37