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

我想在hover时在我的链接周围画一个边框，像这样的动画画像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

好的，所以我检查了网站，似乎他们正在使用自定义动画处理程序 。 这是处理所有自定义动画的外部js文件。

自定义处理程序

现在你要做的就是为每一行创建多个div。 然后按照您想要的方式进行自定义。 如果你想拥有完全相同的外观 –

对于水平div ，

 position:absolute; border-bottom: 1px; width: 0px; height: 0px; border-bottom-color:#000; border-bottom-style:solid; 

对于垂直div ，只需将border-bottom更改为border-left 。

现在jquery，我将尝试解释自定义处理程序如何工作，如果你直接要复制粘贴，

你去吧

首先定义要设置动画的div， $fx('#theHeader1')然后添加用于使动画工作的参数.fxAdd({type: 'width', from: 0, to: 770, step: 10, delay: 10}) ，在这里 –

• 类型：可以是要更改的高度，左侧，顶部
• 来自：价值从开始
• to：值达到
• 步骤：描述速度（如果从较大值变为较小值，则应为负值）
• 延迟：我猜它的平滑性。没有延迟它似乎有错误。

只是说 ：制作这种动画需要很多时间。

Answer 2

如果你没有想法喜欢这个:)

 $("#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(); }); }); 

看小提琴： 点击我

Answer 3

你可以检查一下这笔。使用的技术是css过渡，没有涉及你需要的jquery就像tannerjohn所说的那样，按钮的每一边都有一个div

http://codepen.io/ASidlinskiy/pen/xeBiq?editors=110

HTML：

  
 
 enter 
 
 
 
 
 
 
 
 
  

CSS：

 .button{ position: absolute; top: 50%; left: 50%; width: 120px; height: 40px; margin: 70px 0 0 -60px; border: 1px solid rgba(255,255,255,0.25); } .button .line-top{ position: absolute; top: -1px; left: -1px; width: 0; height: 1px; background: rgba(255,255,255,1); -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .button .line-right{ position: absolute; bottom: 0; right: -1px; width: 1px; height: 0; background: rgba(255,255,255,1); -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .button .line-bottom{ position: absolute; bottom: -1px; right: -1px; width: 0; height: 1px; background: rgba(255,255,255,1); -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .button .line-left{ position: absolute; top: 0; left: -1px; width: 1px; height: 0; background: rgba(255,255,255,1); -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .button:hover .line-top{ width: 122px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .button:hover .line-right{ height: 40px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .button:hover .line-bottom{ width: 122px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .button:hover .line-left{ height: 40px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }