SlideUp回调不会向元素添加类

Question

当我滚动页面时，我想为标题设置动画。它应该slideUp，添加一个类和slideDown。

slideUp和slideDown按预期工作，但未添加类header-small。怎么样？

$(function() {
  var moved = false,
      header = $('header');
  $(window).scroll(function() {
    if ($(document).scrollTop() > 20) {
      if (moved == 'false') {
        header.slideUp(500, function() {
          $(this).addClass('header-small').slideDown('slow');
        });
        moved = true;
      }
    } else {
      header.slideUp(500, function() {
        $(this).removeClass('header-small').slideDown('slow');
      });
      moved = false;
    }
  });
});

body,
html {
  height: 300%;
}

header {
  position: fixed;
  height: 2em;
  background: lightblue;
  top: 0;
  left: 0;
  width: 100%;
}

.header-small {
  font-size: .75em;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  This is a header with text
</header>

我尝试将$(this)更改为$('header')，但结果相同。

Answer 1

你已经实现了字符串，应该是没有引号的布尔值，如 false

if（move == ＆＃39; false＆＃39; ）