div框的简单动画

css:

#hot{
height: 425px;
width: 100%;
background-color: rgba(0,0,0,1.00);
padding-top: 5px;
position: absolute;
top: 699px;
left: 0px;
overflow: hidden;
}
.img{
height:200px;width:30%;float: left;
margin: 5px;
background-size: 100% 100%;
background-repeat: no-repeat; }
.img div{height: 40px;
width: 100%;
margin-top: 161px;
margin-bottom: 0px;
background-color:rgba(0,0,0,0.61);
color:#9A0608;
text-align:left;
text-indent: 15px;
color:aliceblue;
font-size: 16px;
line-height: 40px;
}

.img div span{float: right;}
.img div span strong{font-size:24px;}
/* .img:hover div div{height: 200px;width: 100%;background-color:rgba(255,255,255,0.53);position: relative;top:-360px;z-index: 1000;}*/
.img:hover div div{height: 200px;width: 100%;background-color:rgba(255,255,255,0.20);position: relative;top:-360px;z-index: 1000;}
.img:hover div div div{height:92%;width: 96%;background-color:rgba(255,255,255,0.00);border:3px solid rgba(40,58,162,0.00);position: relative;top:3%;left: 2%; z-index: 1005;overflow: hidden;}
.img:hover div div div div{height:20%;width: 40%;background-color:rgba(78,93,209,1.00);border:none; position:relative;top:-50%;left: 30%; z-index: 1010; text-align: center;}
.img a{text-decoration:none;color: aliceblue;font-weight: 900;}

jq：

//定位还有些问题，根据插件修改出来的

$("#hot>.img").hover(function(){
n1 = $(this).children("div").children("div").children("div").width();
h1 = $(this).children("div").children("div").children("div").height();
becurr = "background:rgba(0,30,58,1.00);position:relative;z-index:1030;"
becurr2 = "background:rgba(0,30,58,1.00);position:relative;z-index:1035;"
// alert(n1);
// top边框 高184 宽389 顶点坐标516%
var divTop ="<div style='"+becurr+"bottom:178%;left: 2%;width:2px;height:5px' class='divTop'></div>";
// right边框
var divRight ="<div style='"+becurr+"bottom:260%;left: 2%;width:5px;height:2px;' class='divRight'></div>";
// Bottom边框
var divBottom ="<div style='"+becurr+"bottom:341%;right: -2%;width:2px;height:4px' class='divBottom'></div>";
// Left边框
var divLeft ="<div style='"+becurr2+"bottom:516%;left: 98%;width:5px;height:4px' class='divLeft'></div>";
$(this).append(divTop,divRight,divBottom,divLeft);

// $(".divRight,.divleft").stop().animate({height:h1+4},200,function(){
// $(".divTop,.divBottom").stop().animate({width:n1+4},200);
$(".divTop,").stop().animate({width:n1+4},200,function(){
$(".divLeft").stop().animate({height:h1+4},200);
$(".divBottom").stop().animate({width:n1+4},200);
});
$(".divRight").stop().animate({height:h1+4},200);
//$(".divLeft").stop().animate({height:(n1/2)-4},2000);
//$(".divRight,.divLeft").stop().animate({height:h1+4},200);
},function(){
$(".divLeft").remove();
$(".divBottom").remove();
$(".divRight").remove();
$(".divTop").remove();
})
});

html:

<!--省略-->

<div id="hot">
<div class="img"><div>好地方<span>CNY&nbsp;<strong>657</strong>&nbsp;起&nbsp;&nbsp;</span><div><div ><div><a href="index.html">了解详情&nbsp;&nbsp;&nbsp;&nbsp;></a></div></div></div></div></div></div>