要素をクリックした後、その要素を削除し新たなクラスを表示したい

前提・実現したいこと

enterクラスをクリック→titleクラスが消え、その後にafter-enterクラスを追加し表示させる

該当のソースコード

HTML

<div class="background"> <div class="title"> <p class="title-word">Welcome to</p>

    <h1 display="block" class="title-word">Inowootan Portfolio Sites</h1>
    <div class="enter-container">
      <a href="#" class="enter">ENTER</a>
    </div>
  </div>
</div>

<div class="after-enter">
  <h1>こんにちは</h1>
</div>

CSS

.after-enter{
display:none;
}

.after-enter h1{
color:white

jQuery

$(function(){
$(".enter").on('click',function(){
$.when(
$('.title').fadeOut(500).removeClass(".title")
})
).done(function(){
$(".after-enter").css("display","block");
})
})

試したこと

.when.doneを使って順番に動作させようとしましたがクリックしても動作しません。

補足情報（FW/ツールのバージョンなど）

atomを使っています。

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1$(function(){
2  $(".enter").on('click',function(){
3    $('.title').fadeOut(500).queue(function(){
4      $(".after-enter").show();
5      $(this).removeClass(".title").dequeue();
6    });
7  });
8});