利用js单线程实现慕课网下方弹出消息泡的渐变动画效果

–前言

• 今天看到无意间看见慕课网下方的动画效果很有新意，研究了以下后将代码展示出来

代码部分

• html代码，这里只写了两个按钮方便理解

                <a href="" class="some"><img src="./img/s1.jpg" alt="">
                //这里的message_puple就是消息泡，默认是none 隐藏
                    <div class="message_purple">
                            <p class="first">="风骚课程学霸"=</p>
                            <p class="second">好帮手慕柯南</p>
                            <p class="last">一周获得75积分</p>
                            <span class="cur">◆</span>
                        </div>
                </a>
                <a href=""  class="some"><img src="./img/s2.jpg" alt="">
                <div class="message_blue" style="left: 149px">
                    <p class="first">="智慧文章王者"=</p>
                    <p class="second">墨色风雨</p>
                    <p class="last">一周发布手记 50 篇</p>
                    <span class="cur">◆</span>
                </div>
                </a> 

• 重点是这里的js代码

//写了一个for循环，拿到所有超链接的个数,找出对应的元素
for(let img=0;img<$(".some_card .some").length;img++){
//悬停触发事件
    $(".some:eq("+img+")").hover(function(){
    //加一个定时器，下文会说原因
        var interval2=setInterval(function(){
        //将属性值初始化
        //也可以写成  $(" .some_card .some:eq("+img+") div").show();
            $(" .some_card .some:eq("+img+")>div").css("display","block");
        $(" .some_card .some:eq("+img+")>div").css("opacity",1);
        clearInterval(interval2);
    })
    },function(){
       let val=1;
       //每过20毫秒，就将透明度提高0.1
        var interval=setInterval(function(){
            val=val-0.1;
            $(" .some_card .some:eq("+img+")>div").css("opacity",val);
            //如果值小于0，则隐藏代码块，同时将定时器关掉
                if(val<=0){
                //用了jq选择器，操作对应hover事件的元素
                $(" .some_card .some:eq("+img+")>div").css("opacity",0);
                $(" .some_card .some:eq("+img+") div").css("display","none");
                //也可以写成  $(" .some_card .some:eq("+img+") div").hide();
                //清除定时器
                clearInterval(interval);
                }
        },20);
    })
}

代码说明

• 为什么要加定时器?

  1.首先是为了显示延迟关闭的效果，不加定时器消息泡弹出和消失都会很突兀，用户体验不佳
  2.因为js是单线程，加了定时器后，会依次执行队列中的事件；

• 移开事件中的let val=1;很重要

  1. 在es6中的新变量let有一个变量作用域，在本例中作用域在函数体内，不同的函数体内的let值互不影响，这样一来，每一个元素的渐变消失效果都是独立的
  2. 如果将let val=1; 换成 var var =1 ; 就会导致一个变量泄漏，相当于全局变量，每一个事件的函数体内都是共用的这个val,会导致一个结果是：一个消息泡的消失会干扰到其他消息泡一同消失

代码尚有许多不严谨的地方，欢迎指出，谢谢！