Как анимировать рисование границ с помощью jQuery?

Если у вас нет идеи, чтобы это понравилось :)

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

 });

Смотрите скрипку: нажмите мне

ОК, Итак, я проверил сайт, кажется, что они используют пользовательский обработчик анимации. Здесь это внешний js- файл, который обрабатывает все пользовательские анимации.

Пользовательский обработчик

Теперь вам нужно создать несколько div для каждой строки. Затем настройте его так, как вы хотите. Если вы хотите иметь то же самое look-

Для горизонтальных divs,

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

Для вертикальных divs просто измените border-bottom на border-left.

Теперь jquery, я попытаюсь объяснить, как работает пользовательский обработчик, если вы непосредственно хотите скопировать пасту,

Вот иди.

Сначала вы определяете div, который хотите оживить, $fx('#theHeader1') затем добавляете параметры для работы анимации .fxAdd({type: 'width', from: 0, to: 770, step: 10, delay: 10}), here-

• type: Может быть с, высотой, слева, сверху, которую вы хотите изменить
• от: Значение для начала
• до: Значение до
• step: Описывает скорость (должна быть отрицательной при переходе от большего значения к меньшему)
• Задержка: я предполагаю, что это для гладкости. Без задержек это выглядит багги.

Просто сказать: для создания такой анимации потребуется много времени.

вы можете проверить эту ручку. Используемая техника - 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;
        }