jquery標題左右移動動畫

標題會在紅框範圍內來回移動

html和css代碼

<div class="menu-notice" @click="check_cart">
        <div class="menu-notice-logo"></div>
        <div class="menu-notice-title" ref="noticeTitle">
          {{storeinfo[0] ? storeinfo[0]['name'] : ''}}
        </div>
      </div>

.menu-container .menu-notice{
  height: 45px;
  line-height: 45px;
  background: #fff9df;
  position: relative;
}
.menu-container .menu-notice:after{
  content: "";
  display: block;
  width: 0;
  height: 0;
  visibility: hidden;
  clear: both;
}
.menu-notice .menu-notice-logo,.menu-notice .menu-notice-title{
  float: left;
  height: 45px;
}
.menu-notice .menu-notice-logo{
  width: 50px;
  background: url("../../assets/notice2.png") no-repeat center center;
  background-size: 50%;
}
.menu-notice .menu-notice-title{
  position: absolute;
  left: 50px;
  top: 0px;
  font-size: 15px;
  color: #666;
  font-weight: 600;
}

jquery代碼

blockMove: function () {
      let that = this;
      let noticeTitle = this.$refs.noticeTitle.offsetWidth ? this.$refs.noticeTitle.offsetWidth : 100;
      let menuContainer = this.$refs.menuContainer.clientWidth - (20 + noticeTitle);
      if($('.menu-notice-title').position().left == 50){
          $('.menu-notice-title').stop().animate({
            left: menuContainer
          },15000,function () {
            that.blockMove();
          })
      }else{
          $('.menu-notice-title').stop().animate({
            left: '50px'
          },15000,function () {
            that.blockMove();
          })
      }
    }