Я хочу нарисовать границу вокруг моих ссылок при наведении, с анимацией smth вроде этого 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');
});
Если у вас нет идеи, чтобы это понравилось :)
$("#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-
Просто сказать: для создания такой анимации потребуется много времени.
вы можете проверить эту ручку. Используемая техника - 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"> </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;
}