鼠标悬停，边框动画 是什么实现原理？

Question

求如下链接的第一个效果是如何实现的？百思不得其解

http://www.jq22.com/yanshi15784

Answer 1

显示部分边框如下：

<style>
div {position:relative; width:300px; height:50px; background-color:#bbb; padding:4px}
div:before {content:""; position:absolute; right:0; top:-2px; width:80%; height:2px; background-color:red}
</style>
<div>这个div边框</div>

这个是用js实现的，部分代码如下：
可以看这个地址，比较纯粹 http://www.jq22.com/demo/jQueryHover201709111616/

function num2(){
                // top边框
                var divTop = "<div style='"+becurr+"height:2px;width:50px;top:-2px;left:-80px;' class='divTop'></div";

                // right边框
                var divRight = "<div style='"+becurr+"height:50px;width:2px;top:-80px;right:-2px;' class='divRight'></div";

                // Bottom边框
                var divBottom = "<div style='"+becurr+"height:2px;width:50px;bottom:-2px;right:-80px;' class='divBottom'></div";

                // Left边框
                var divLeft = "<div style='"+becurr+"height:50px;width:2px;bottom:-80px;left:-2px;' class='divLeft'></div";
                _this.hover(function(){
                    el = $(this)
                    el.append(divTop,divRight,divBottom,divLeft);
                    num2 = new than(el)
                    num2.thsn()
                    _thisTop.animate({left:-2,},options.speed).fadeOut(0)
                    _thisRight.animate({top:-2},options.speed).fadeOut(0)
                    _thisBottom.animate({right:-2,},options.speed).fadeOut(0)
                    _thisLeft.animate({bottom:-2,},options.speed).fadeOut(0);
                },function(){
                    _thisTop.show().animate({left:-80},options.speed).hide(0)
                    _thisRight.show().animate({top:-80},options.speed).hide(0)
                    _thisBottom.show().animate({right:-80},options.speed).hide(0)
                    _thisLeft.show().animate({bottom:-80},options.speed,function(){
                        _thisAll.remove()
                    }).hide(0);
                })
            }