javascript页面文字轮播，切出页面样式错乱问题解决

摘要：需求是做一个文字走马灯效果，正常写循环动画，切出切回的时候会出现定位错误的bug，查了很多解决方案都没用，最后两种解决方案结合方可奏效，特此记录一下，代码如下。

1.html代码

	<!-- 走马灯文字 -->
    <div class = "see-video" onclick = "seeVideo()" onmousemove = "clearInterval(timer);" onmouseout = "timer = setInterval(() => {play()}, 3000);">
        <div class = "t_news">
            <i class = "iconfont icon-shipin"></i>
            <ul class="hook_area">
                <li>测试精模替换演示视频</li>
                <li>测试演示视频</li>
            </ul>
            <ul class="swap"></ul>
        </div>
    </div>

2.Css样式

	.see-video{
	     width: 200px;
	     height: 35px;
	     background: #363636;
	     position: absolute;
	     right: 0;
	     top: 5px;
	     overflow: hidden;
	     border-radius: 10px;
	     cursor: pointer;
	     .t_news{
	         height:19px;  
	         color:#e6e6e6; 
	         padding-left:10px;
	         margin:8px 0; 
	         overflow:hidden; 
	         position:relative;
	         i{
	             float: left;
	             position: absolute;
	             left: 17px;
	             color: #e6e6e6;
	             font-size: 18px;
	             top: -4px;
	             animation: icon_text 0.5s linear 1.5s infinite alternate;
	         }
	     }
	 }
	 .hook_area,.swap{ 
	     line-height:19px; 
	     display:inline-block; 
	     position:absolute; 
	     top:0; 
	     left:45px;
	     a{
	         color:#fff;
	     }
	 }
	 .swap{
	    top:19px;
	 }

2.script逻辑

	// 文字滚动
	function play(){	
		t = parseInt(x.css('top'));
		y.css('top','19px');
        // 解决方案stop([clearQueue], [gotoEnd])
        // clearQueue (可选)Boolean如果设置成true，则清空队列。可以立即结束动画
        // gotoEnd (可选)Boolean让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等。
		x.stop(true,true).animate({top: t - 19 + 'px'},300);	//19为每个li的高度
        console.log(Math.abs(t) - (h - 19),)
		if(Math.abs(t) - (h - 19) == 0 ){ //19为每个li的高度
			y.stop(true,true).animate({top:'0px'},300);
			z=x;
			x=y;
			y=z;
		}
	}
	$(function(){
		$('.swap').html($('.hook_area').html());
		x = $('.hook_area');
		y = $('.swap');
		h = $('.hook_area li').length * 19; //19为每个li的高度
	})
    var timer = setInterval(function(){
        play()
    },3000);
    // 监听 visibility change 事件 
    document.addEventListener('visibilitychange',function(){
        var isHidden = document.hidden;
            // 如果切出，停止动画
            if(isHidden){
                console.log('出去了')
                clearInterval(timer);
            // 切回来,启动动画。为什么重新赋值，测试一下就知道了。
            } else {
                console.log('回来了')
                timer = setInterval(() => {play()}, 3000);
            }
        }
    );

水平有限，还不能写到尽善尽美，希望大家多多交流，跟春野一同进步！！！