javascript - 添加和删​​除类时应用过渡效果

Question

尝试在添加和删除类时添加滑动过渡效果。 尝试了下面这个粘性导航 js:

lastScroll = 0;
$(window).on('scroll',function() {    
    var scroll = $(window).scrollTop();
    if(scroll === 0){
        $(".nav").removeClass("darkHeader");
    } else if(lastScroll - scroll > 0) {
        $(".nav").addClass("darkHeader");
    } else {
        $(".nav").removeClass("darkHeader");
    }
    lastScroll = scroll;
});

我的尝试:

lastScroll = 0;
$(window).on('scroll',function() {    
    var scroll = $(window).scrollTop();
    if(scroll === 0){
        $(".nav").removeClass("darkHeader", 1000, "easeInOutQuad");
    } else if(lastScroll - scroll > 0) {
        $(".nav").addClass("darkHeader", 1000, "easeInOutQuad");
    } else {
        $(".nav").removeClass("darkHeader", 1000, "easeInOutQuad");
    }
    lastScroll = scroll;
});

我尝试通过添加 1000, "easeInOutQuad" 来尝试此操作，尝试通过 jquery 不使用 CSS3(请不要使用 css) 来实现。
问题 Fiddle >>

我正在尝试实现类似 this 的幻灯片效果>>

Answer 1

尝试使用 jQuery UI , .animate() , .stop() ;在添加 .darkHeader class 之前添加 .css("top", 0) ，添加 color: wheat 到 .darkHeader css

$(function() {

  lastScroll = 0;

  function _scroller() {
    var scroll = $(window).scrollTop();
    if (scroll < 10) {
      $(".nav").stop()
        .animate({
          backgroundColor: "rgb(250, 227, 183)"
        }, {
          duration: 1000,
          easing: "easeInOutQuad"
        })
        .removeClass("darkHeader");
    } else if (lastScroll - scroll > 10) {

      if (!$(".nav").is(":animated")) {
        $(this).off("scroll");
        $(".nav").stop()
          .css("top", -24)
          .animate({
            top: 0,
            backgroundColor: "rgb(0, 0, 0)"
          }, {
            duration: 1000,
            easing: "easeInOutQuad",
            complete: function() {
              $(window).on("scroll.t", function() {
                if ($(window).scrollTop() < 1) {
                  $(this).off("scroll.t")
                  .on("scroll", _scroller).scroll()
                }
              })
            }
          })
          .addClass("darkHeader");
      }
    } else {
      $(".nav").stop()
        .animate({
          backgroundColor: "rgb(243, 221, 180)"
        }, {
          duration: 1000,
          easing: "easeInOutQuad"
        })
        .removeClass("darkHeader");
    }
    lastScroll = scroll;
  }
  $(window).on('scroll', _scroller)

});

body {
  font-family: "Rokkitt", Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 20px;
  background: #f8f8f0;
  margin: 0;
}
.darkHeader {
  /*background-color: black !important; */
  position: fixed;
  color: wheat;
}
.nav {
  width: 100%;
  background-color: wheat;
  padding: 10px;
}
.menu {
  float: right;
  cursor: pointer;
  margin-top: -8px;
}
#content {
  margin-top: 150px;
  padding-top: 20px;
}
.wrap {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 40px;
}
#top span {
  white-space: nowrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div class="nav">Sticky top navigation bar</div>
<div class="wrap">

  <h3>Some filler text</h3>
  Bacon ipsum dolor sit amet mollit ball tip occaecat brisket cupidatat meatball capicola. Capicola rump turducken, elit shankle cupidatat pastrami duis fatback. Sint occaecat kielbasa labore pastrami corned beef. Sunt swine bacon, fugiat dolor aute anim
  jerky nostrud et venison shankle consectetur boudin landjaeger. Pork chop sed turkey aute, duis corned beef pariatur short loin proident culpa. Capicola filet mignon fugiat corned beef shank ea, commodo doner adipisicing eu salami. Doner laboris pariatur
  beef ribs non id. Andouille eu meatball consectetur ham hock. Ea dolore cillum cow pork loin aliquip leberkas id est corned beef dolore t-bone. In salami jerky cupidatat et. Ham hock irure reprehenderit chicken drumstick sausage ad, pig elit salami.
  Tri-tip consectetur t-bone salami, sunt jerky exercitation ham ut tempor nostrud enim. Beef ribs enim esse do non sausage. Chuck anim spare ribs ut ad deserunt, tri-tip chicken bacon tongue ball tip. Est tongue doner eiusmod veniam sint tenderloin deserunt
  bresaola strip steak fugiat proident pastrami.
  <p>Mollit turkey pork chop, drumstick tongue shank pastrami tempor. Reprehenderit consequat excepteur, in eiusmod ut incididunt short loin adipisicing tenderloin capicola fugiat. Ut non short ribs ball tip. Elit beef non flank reprehenderit hamburger.
    Fatback drumstick pancetta magna shankle corned beef pastrami spare ribs. Quis dolore beef non, veniam aliqua sirloin consectetur laboris shoulder pork leberkas short loin. Rump qui beef spare ribs drumstick andouille duis est esse irure strip steak
    labore.
  </p>
  <p>Tongue filet mignon pancetta, elit pariatur nostrud deserunt excepteur tri-tip salami in nisi. Ball tip beef fugiat, mollit officia jerky sirloin chuck dolore. Sausage fugiat spare ribs, tongue pork belly ut in. T-bone fatback anim nisi minim culpa
    laboris andouille meatball ham ut.</p>
  <p>Et turducken pork loin strip steak tempor enim nostrud magna minim qui adipisicing. Pork nulla mollit dolore. Nisi reprehenderit shank, hamburger jerky magna drumstick pancetta duis t-bone tempor cow proident ut. Andouille sed beef ribs tail chuck deserunt
    mollit beef adipisicing ribeye landjaeger. Shankle pig cillum aliquip, exercitation t-bone ground round prosciutto mollit chuck kevin brisket dolore ullamco. Pork chop capicola culpa doner nostrud filet mignon pork loin voluptate qui ut in aliquip
    pork belly.</p>
  <p>Deserunt pancetta pork loin cillum cupidatat laborum pork belly jerky short ribs prosciutto leberkas mollit non tail duis. Laborum in pork chop, venison filet mignon voluptate tail reprehenderit pig shankle rump deserunt in cupidatat. Landjaeger pork
    chop incididunt, irure occaecat mollit elit tenderloin excepteur anim kevin frankfurter tongue corned beef. Id pork chop magna et non velit. Boudin hamburger dolore eu ut culpa. In ut deserunt incididunt meatball ribeye, shoulder aute. Cillum labore
    occaecat salami quis laborum. Ex nulla pancetta ham hock tongue, andouille aute laborum velit strip steak beef ribs. Id corned beef excepteur filet mignon drumstick est magna consequat veniam enim exercitation sunt venison strip steak biltong. Cillum
    pancetta id quis biltong capicola corned beef. Boudin tongue in pariatur proident ut pork belly magna nulla swine.</p>
  <p>Ad aliquip officia, aute chuck qui veniam swine pancetta t-bone ribeye doner. Culpa velit eiusmod, ball tip nisi consectetur nostrud et sausage bresaola eu dolore. Turducken dolore irure commodo pork chop meatball duis short ribs, t-bone boudin bacon.
    Aliquip ad tri-tip swine eiusmod. Rump chicken kevin eu. Voluptate biltong commodo, hamburger esse non tempor sausage cillum eiusmod ribeye sunt shankle. Meatloaf short ribs voluptate brisket, pork belly bresaola ullamco chuck ball tip incididunt
    irure eu consequat hamburger leberkas. Meatball occaecat filet mignon, jowl kielbasa exercitation reprehenderit bresaola venison. Incididunt salami ham quis prosciutto pork loin cow irure labore venison sausage corned beef chicken. Laboris jowl strip
    steak quis spare ribs. In hamburger et ea bresaola turkey.</p>
  <p>Bacon ipsum dolor sit amet mollit ball tip occaecat brisket cupidatat meatball capicola. Capicola rump turducken, elit shankle cupidatat pastrami duis fatback. Sint occaecat kielbasa labore pastrami corned beef. Sunt swine bacon, fugiat dolor aute anim
    jerky nostrud et venison shankle consectetur boudin landjaeger. Pork chop sed turkey aute, duis corned beef pariatur short loin proident culpa. Capicola filet mignon fugiat corned beef shank ea, commodo doner adipisicing eu salami. Doner laboris pariatur
    beef ribs non id. Andouille eu meatball consectetur ham hock. Ea dolore cillum cow pork loin aliquip leberkas id est corned beef dolore t-bone. In salami jerky cupidatat et.</p>Ham hock irure reprehenderit chicken drumstick sausage ad, pig elit salami.
  Tri-tip consectetur t-bone salami, sunt jerky exercitation ham ut tempor nostrud enim. Beef ribs enim esse do non sausage. Chuck anim spare ribs ut ad deserunt, tri-tip chicken bacon tongue ball tip. Est tongue doner eiusmod veniam sint tenderloin deserunt
  bresaola strip steak fugiat proident pastrami. Mollit turkey pork chop, drumstick tongue shank pastrami tempor. Reprehenderit consequat excepteur, in eiusmod ut incididunt short loin adipisicing tenderloin capicola fugiat. Ut non short ribs ball tip.
  Elit beef non flank reprehenderit hamburger. Fatback drumstick pancetta magna shankle corned beef pastrami spare ribs. Quis dolore beef non, veniam aliqua sirloin consectetur laboris shoulder pork leberkas short loin. Rump qui beef spare ribs drumstick
  andouille duis est esse irure strip steak labore.
  <p>Tongue filet mignon pancetta, elit pariatur nostrud deserunt excepteur tri-tip salami in nisi. Ball tip beef fugiat, mollit officia jerky sirloin chuck dolore. Sausage fugiat spare ribs, tongue pork belly ut in. T-bone fatback anim nisi minim culpa
    laboris andouille meatball ham ut. Et turducken pork loin strip steak tempor enim nostrud magna minim qui adipisicing. Pork nulla mollit dolore. Nisi reprehenderit shank, hamburger jerky magna drumstick pancetta duis t-bone tempor cow proident ut.
    Andouille sed beef ribs tail chuck deserunt mollit beef adipisicing ribeye landjaeger. Shankle pig cillum aliquip, exercitation t-bone ground round prosciutto mollit chuck kevin brisket dolore ullamco. Pork chop capicola culpa doner nostrud filet
    mignon pork loin voluptate qui ut in aliquip pork belly.</p>Deserunt pancetta pork loin cillum cupidatat laborum pork belly jerky short ribs prosciutto leberkas mollit non tail duis. Laborum in pork chop, venison filet mignon voluptate tail reprehenderit
  pig shankle rump deserunt in cupidatat. Landjaeger pork chop incididunt, irure occaecat mollit elit tenderloin excepteur anim kevin frankfurter tongue corned beef. Id pork chop magna et non velit. Boudin hamburger dolore eu ut culpa. In ut deserunt
  incididunt meatball ribeye, shoulder aute. Cillum labore occaecat salami quis laborum. Ex nulla pancetta ham hock tongue, andouille aute laborum velit strip steak beef ribs. Id corned beef excepteur filet mignon drumstick est magna consequat veniam
  enim exercitation sunt venison strip steak biltong. Cillum pancetta id quis biltong capicola corned beef. Boudin tongue in pariatur proident ut pork belly magna nulla swine. Ad aliquip officia, aute chuck qui veniam swine pancetta t-bone ribeye doner.
  Culpa velit eiusmod, ball tip nisi consectetur nostrud et sausage bresaola eu dolore. Turducken dolore irure commodo pork chop meatball duis short ribs, t-bone boudin bacon. Aliquip ad tri-tip swine eiusmod. Rump chicken kevin eu. Voluptate biltong
  commodo, hamburger esse non tempor sausage cillum eiusmod ribeye sunt shankle. Meatloaf short ribs voluptate brisket, pork belly bresaola ullamco chuck ball tip incididunt irure eu consequat hamburger leberkas. Meatball occaecat filet mignon, jowl kielbasa
  exercitation reprehenderit bresaola venison. Incididunt salami ham quis prosciutto pork loin cow irure labore venison sausage corned beef chicken. Laboris jowl strip steak quis spare ribs. In hamburger et ea bresaola turkey. Bacon ipsum dolor sit amet
  mollit ball tip occaecat brisket cupidatat meatball capicola. Capicola rump turducken, elit shankle cupidatat pastrami duis fatback. Sint occaecat kielbasa labore pastrami corned beef. Sunt swine bacon, fugiat dolor aute anim jerky nostrud et venison
  shankle consectetur boudin landjaeger. Pork chop sed turkey aute, duis corned beef pariatur short loin proident culpa. Capicola filet mignon fugiat corned beef shank ea, commodo doner adipisicing eu salami. Doner laboris pariatur beef ribs non id. Andouille
  eu meatball consectetur ham hock. Ea dolore cillum cow pork loin aliquip leberkas id est corned beef dolore t-bone. In salami jerky cupidatat et. Ham hock irure reprehenderit chicken drumstick sausage ad, pig elit salami. Tri-tip consectetur t-bone
  salami, sunt jerky exercitation ham ut tempor nostrud enim. Beef ribs enim esse do non sausage. Chuck anim spare ribs ut ad deserunt, tri-tip chicken bacon tongue ball tip. Est tongue doner eiusmod veniam sint tenderloin deserunt bresaola strip steak
  fugiat proident pastrami.
  <p>Mollit turkey pork chop, drumstick tongue shank pastrami tempor. Reprehenderit consequat excepteur, in eiusmod ut incididunt short loin adipisicing tenderloin capicola fugiat. Ut non short ribs ball tip. Elit beef non flank reprehenderit hamburger.
    Fatback drumstick pancetta magna shankle corned beef pastrami spare ribs. Quis dolore beef non, veniam aliqua sirloin consectetur laboris shoulder pork leberkas short loin. Rump qui beef spare ribs drumstick andouille duis est esse irure strip steak
    labore.
  </p>Tongue filet mignon pancetta, elit pariatur nostrud deserunt excepteur tri-tip salami in nisi. Ball tip beef fugiat, mollit officia jerky sirloin chuck dolore. Sausage fugiat spare ribs, tongue pork belly ut in. T-bone fatback anim nisi minim culpa
  laboris andouille meatball ham ut.
  <p>Et turducken pork loin strip steak tempor enim nostrud magna minim qui adipisicing. Pork nulla mollit dolore. Nisi reprehenderit shank, hamburger jerky magna drumstick pancetta duis t-bone tempor cow proident ut. Andouille sed beef ribs tail chuck deserunt
    mollit beef adipisicing ribeye landjaeger. Shankle pig cillum aliquip, exercitation t-bone ground round prosciutto mollit chuck kevin brisket dolore ullamco. Pork chop capicola culpa doner nostrud filet mignon pork loin voluptate qui ut in aliquip
    pork belly.</p>
</div>

jsfiddle http://jsfiddle.net/9fbr320y/9/