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>

私は$('header')に$(this)を変更しようとしたが、同じ結果ました。あなたは、文字列を実装している

Answer 1

`