标题会在红框范围内来回移动

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();})}}