用淡入和淡出替换文字

Question

在导航框的宽度滑动的同时，我需要将标题内的“ S3”文本更改为“固定固态”。

我想在宽度扩大时淡出“ S3”，并在此期间淡入“固定固态”。

http://jsfiddle.net/5mL0bvxu/

HTML：

<div class = "noteCard-box">
    <!-- S3 NOTECARD -->
    <div id="s3">
        <div class = "s3-header">
            <h1 id="s3-abbrev">S3</h1>
        </div>

        <div id = "s3-detail" class = "noteCard-details">
            <p> S3 Notes go in this section would animate</p>
        </div>

    </div>

</div>

CSS：

.noteCard-box{
    width: auto;
    height: auto;
    padding: 20px;
    border: 4px solid red;
}


.s3-header, .iam-header, .ebs-header{
    background-color: rgba(174, 214, 241, 0.5);
    display: flex, inline-flex;
    white-space: nowrap;
    height: 3em;
    width: 10%;
    font-family: 'Poppins', sans-serif;
    border-left: 6px solid #48C9B0;
    border-radius: 2px;
    cursor: pointer;
    padding: 0 5px;
    transition: all 0.6s ease-out;

}

.noteCard-details{
    white-space: nowrap;
    display: flex, inline-flex;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    position: relative;
    transition: all 0.33s ease;
    overflow: hidden;
    padding: 0 5px;
    margin: 0 auto;
    border: 1px solid black;
    border-left: 6px solid yellow;
    border-radius: 2px;
    height: 300px;
    width: 35%;
}

.width-increase{
    width: 20%;
}

JAVASCRIPT：

$(document).ready(function(){
    $(".s3-header").click(function(){
      $(".s3-header").toggleClass('width-increase')
    })
  });


$(document)
    $(".s3-header").click(function(){
      $("#s3-abbrev").animate({opacity:0},function(){
          $(this).text("new text").animate({opacity:1});  
      })
  });