JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav-center">
    <p class="main-nav-left">我是測試文字</p>    
</div>
<button>click me</button>

CSS

p,div
{
    margin:0;
    padding:0;
}
p.main-nav-left
{
    position:relative;
    bottom:-30px;
   
}
div.nav-center
{   
    height:30px;
    overflow:hidden;
}

JavaScript

var test=function()
{     
    $(".main-nav-left").animate({
        "bottom":"0px"
    },300,function(){
        $("button").unbind("click").bind("click",test2);
    });
};
var test2=function()
{     
  $(".main-nav-left").animate({
      "bottom":"-30px"
  },800,function()
  {
      $("button").unbind("click").bind("click",test);
  });
};
$("button").bind("click",test);