jquery边框特效

主要思想

1.将四个div分别定位到大div的上下左右位置2.分别设置成宽度为0或者高度为03.让其执行给定动画，即多少毫秒让宽度或者高度变为指定的长度

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