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

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

Custom Handler

现在你要做的就是为每一行创建多个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，我将尝试解释自定义处理程序是如何工作的，如果你直接要复制粘贴，

Here you go 。

首先定义要设置动画的div，$fx('#theHeader1')然后添加用于使动画生效的参数.fxAdd({type: 'width', from: 0, to: 770, step: 10, delay: 10})，此处 -

类型：可以使用，您想要更改的高度，左侧，顶部
来自：从
至：最多值
步骤：描述速度（如果从较大值变为较小值，则应为负数）
延迟：我猜它的顺畅性。没有延迟，它似乎有错误。

仅表示 ：制作此类动画需要花费大量时间。

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

 });

请参阅小提琴：Click me

Answer 3

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

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">&nbsp;</div>
                        <div class="line-right">&nbsp;</div>
                        <div class="line-bottom">&nbsp;</div>
                        <div class="line-left">&nbsp;</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动画边框绘制？

3 个答案: