JQuery边框特效

####主要思想 1.将四个div分别定位到大div的上下左右位置 2.分别设置成宽度为0或者高度为0 3.让其执行给定动画，即多少毫秒让宽度或者高度变为指定的长度 ####html代码 <div class="box"> <div class="border_top"></div> <div class="border_bottom"></div> <div class="border_left"></div> <div class="border_right"></div> </div> ####css代码 .box{ width:234px; height:300px; position:relative; } .border_bottom,.border_left,.border_right,.border_top{ background: #ff6700; position: absolute; font-size: 0px; transition: all 0.5s ease-out; z-index: 99; } .border_bottom,.border_top{ height: 1px; width: 0px; } .border_right,.border_left{ height: 0px; width: 1px; } .border_top { top:0px; left:0px; } .border_right { top:0px; right:0px; } .border_bottom { right: 0px; bottom: 0px; } .border_left { left: 0px; bottom: 0px; } ####js实现效果 #####1.引入jquery文件 <script src="jquery-1.8.3.min.js"></script> #####2.jquery代码 $('.main>li').hover(function(){ var index=$(this).index(); $(".border_top").stop(true,true); $(".border_left").stop(true,true); $(".border_bottom").stop(true,true); $(".border_right").stop(true,true); $(".border_top").eq(index).animate({width:"234px"},100) $(".border_left").eq(index).animate({height:"300px"},100) $(".border_bottom").eq(index).animate({width:"234px"},100) $(".border_right").eq(index).animate({height:"300px"},100) },function(){ var index=$(this).index(); $(".border_top").stop(true,true); $(".border_left").stop(true,true); $(".border_bottom").stop(true,true); $(".border_right").stop(true,true); $(".border_top").eq(index).animate({width:"0"},100) $(".border_left").eq(index).animate({height:"0"},100) $(".border_bottom").eq(index).animate({width:"0"},100) $(".border_right").eq(index).animate({height:"0"},100) });

转载于:https://my.oschina.net/u/2402530/blog/802231