javascript - 如何使用 jQuery 绘制边框动画？

Question

我想在悬停时在链接周围绘制边框，动画如下 http://d2fhka9tf2vaj2.cloudfront.net/tuts/152_QTiPad/Milestones/JavaScriptWebsite.html

请给我一些片段或链接。

谢谢

这就是我尝试用 jquery 制作动画的方式

        $('a').on('hover', function() {
            $(this).animate({ border: '1px' }, 'slow', 'linear');
            $(this).animate({ border: 'solid' }, 'slow');
            $(this).animate({ border: '#ccc' }, 'slow');
        });

Answer 1

如果你不知道喜欢这个:)

$("#block").mouseenter(function(){
$("#span1,#span2,#span3,#span4").show(); 
$("#span1").animate({
height: "50px"
}, 1500 );
$("#span2").animate({
width: "110px"
}, 1500 );
$("#span3").animate({
height: "55px",
  top:"-5px"
}, 1500 );
$("#span4").animate({
width: "105px",
left:"-5px"
}, 1500 );
});

 $("#block").mouseleave(function(){
 $("#span1").animate({
 height: "5px"
}, 1500 );
$("#span2").animate({
width: "5px"
}, 1500 );
$("#span3").animate({
height: "5px",
  top:"50px"
}, 1500 );
$("#span4").animate({
width: "5px",
left:"100px"
}, 1500,function(){
 $("#span1,#span2,#span3,#span4").hide(); 
});

 });

参见 fiddle :Click me