How to animate border drawing with jQuery?

Question

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

Answer 1

OK, So i checked out the site, seems they are using a custom animation handler . Here, this is the external js file that handles all the custom animation .

Custom Handler

Now what you have to do is create multiple divs for each line. Then customize it the way you want. If you want to have the exact same look-

For the horizontal divs ,

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

For the vertical divs , just change border-bottom to border-left .

Now the jquery,I'll try to explain how the custom handler works, if you directly wan to copy paste,

Here you go .

First you define the div you want to animate, $fx('#theHeader1') then you add the parameters for making the animation work .fxAdd({type: 'width', from: 0, to: 770, step: 10, delay: 10}) , here-

• type: Can be with,height,left,top that you want to change
• from: Value to start from
• to: Value up to
• step: Describes speed (should be negative if going from greater value to smaller value)
• delay: I guess its for smoothness.Without delay it appears buggy.

Just to say : Making that kind of animation will require a lot of time.

Answer 2

If you Have no Idea To like this:)

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

 });

See fiddle: Click me

Answer 3

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">&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;
        }