如何动画绘制边框使用jQuery？ [英] How to animate border drawing with jQuery?
本文介绍了如何动画绘制边框使用jQuery？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我要画在我的悬停链接的边框，动画水木清华这样的http://d2fhka9tf2vaj2.cloudfront.net/tuts/152_QTiPad/Milestones/JavaScriptWebsite.html
请给我一些片段或链接。
感谢您
这是我如何试图与jQuery动画它
$（'A'）。在（'悬停'，函数（）{
$（本）.animate（{边框：1px的'}，'慢'，'直线'）;
$（本）.animate（{边框：'实'}，'慢'）;
$（本）.animate（{边框：#CCC'}，'慢'）;
}）;
解决方案
您可以检查使用该pen.the技术是CSS过渡，没有涉案的jQuery
你需要是什么样的tannerjohn说，对于按钮的每一面的div
HTTP：//$c$cpen.io/ASidlinskiy/pen/ xeBiq？编辑= 110
HTML
＆LT; DIV CLASS =主＆GT;
＆LT; DIV CLASS =按钮＆GT;
＆LT; A HREF =JavaScript的：无效（0）＆GT;进入＆LT; / A＆GT;
＆LT; DIV CLASS =行顶＆GT;＆安培; NBSP;＆LT; / DIV＆GT;
＆LT; DIV CLASS =行权＆GT;＆安培; NBSP;＆LT; / DIV＆GT;
＆LT; DIV CLASS =线下＆GT;＆安培; NBSP;＆LT; / DIV＆GT;
＆LT; DIV CLASS =行左＆GT;＆安培; NBSP;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
CSS：
.button {
位置：绝对的;
顶部：50％;
左：50％;
宽度：120像素;
高度：40像素;
保证金：70像素，0 0 -60px;
边框：1px的固体RGBA（255,255,255,0.25）;
}
.button .line顶{
位置：绝对的;
顶部：-1px;
左：-1px;
宽度：0;
高度：1px的;
背景：RGBA（255,255,255,1）;
-webkit-过渡：所有0.5S易于在出;
-moz-过渡：所有0.5S易于在出;
-o过渡：所有0.5S易于在出;
过渡：所有0.5S易于在出;
}
.button .line右{
位置：绝对的;
底部：0;
右：-1px;
宽度：1px的;
高度：0;
背景：RGBA（255,255,255,1）;
-webkit-过渡：所有0.5S易于在出;
-moz-过渡：所有0.5S易于在出;
-o过渡：所有0.5S易于在出;
过渡：所有0.5S易于在出;
}
.button .line底{
位置：绝对的;
底部：-1px;
右：-1px;
宽度：0;
高度：1px的;
背景：RGBA（255,255,255,1）;
-webkit-过渡：所有0.5S易于在出;
-moz-过渡：所有0.5S易于在出;
-o过渡：所有0.5S易于在出;
过渡：所有0.5S易于在出;
}
.button .line左{
位置：绝对的;
顶部：0;
左：-1px;
宽度：1px的;
高度：0;
背景：RGBA（255,255,255,1）;
-webkit-过渡：所有0.5S易于在出;
-moz-过渡：所有0.5S易于在出;
-o过渡：所有0.5S易于在出;
过渡：所有0.5S易于在出;
}
.button：悬停.line顶{
宽度：122px;
-webkit-过渡：所有0.5S易于在出;
-moz-过渡：所有0.5S易于在出;
-o过渡：所有0.5S易于在出;
过渡：所有0.5S易于在出;
}
.button：悬停.line右{
高度：40像素;
-webkit-过渡：所有0.5S易于在出;
-moz-过渡：所有0.5S易于在出;
-o过渡：所有0.5S易于在出;
过渡：所有0.5S易于在出;
}
.button：悬停.line底{
宽度：122px;
-webkit-过渡：所有0.5S易于在出;
-moz-过渡：所有0.5S易于在出;
-o过渡：所有0.5S易于在出;
过渡：所有0.5S易于在出;
}
.button：悬停.line左{
高度：40像素;
-webkit-过渡：所有0.5S易于在出;
-moz-过渡：所有0.5S易于在出;
-o过渡：所有0.5S易于在出;
过渡：所有0.5S易于在出;
}
I want to draw a border around my links on hover, with animation smth like this http://d2fhka9tf2vaj2.cloudfront.net/tuts/152_QTiPad/Milestones/JavaScriptWebsite.html
Please give me some snippets or links.
Thank you
This is how i tried to animate it with jquery
$('a').on('hover', function() {
$(this).animate({ border: '1px' }, 'slow', 'linear');
$(this).animate({ border: 'solid' }, 'slow');
$(this).animate({ border: '#ccc' }, 'slow');
});
解决方案
you can check this pen.the technique used is css transitions, no jquery involved what you do need is like tannerjohn said, a div for each side of button
http://codepen.io/ASidlinskiy/pen/xeBiq?editors=110
html:
<div class="main">
<div class="button">
<a href="javascript:void(0)">enter</a>
<div class="line-top"> </div>
<div class="line-right"> </div>
<div class="line-bottom"> </div>
<div class="line-left"> </div>
</div>
</div>
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;
}
这篇关于如何动画绘制边框使用jQuery？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
