原生jQuery图片边框线条动画效果

1、新建html文档。

3、书写hmtl代艨位雅剖码。<div class="aaa"> <a href="#"><img src="christmas.jpg"/></a> <div class="border-left"></div> <div class="border-bottom"></div> <div class="border-top"></div> <div class="border-right"></div></div><div class="aaa"> <a href="#"><img src="christmas.jpg"/></a> <div class="border-left"></div> <div class="border-bottom"></div> <div class="border-top"></div> <div class="border-right"></div></div>

5、书写并添加js代码。<script src='#ajaxjs/jquery.min.js'></script><script> $(function(){ var cccc_width = $('.aaa').width(); var cccc_height = $('.aaa').height(); $('.aaa').each(function(){ $(this).hover(function(){ $(this).find('.border-left,.border-right').stop().animate({height:cccc_height+'px'},400); $(this).find('.border-top,.border-bottom').stop().animate({width:cccc_width+'px'},400); },function(){ $(this).find('.border-left,.border-right').stop().animate({height:'0'},400); $(this).find('.border-top,.border-bottom').stop().animate({width:'0'},400); }); }); });</script>

7、查看效果。