在悬停的边界动画
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在悬停的边界动画相关的知识，希望对你有一定的参考价值。
我想知道，我怎样才能创建这样的效果，用户将鼠标悬停在一个盒子上，并且当悬停其他盒子时边框跟随鼠标位置？我试图搜索类似的例子，我找不到任何东西。
鼠标悬停：
答案
我创造了一个Demo！ 也许这就是你想要的:)
$(document).ready(function() {
var navBar = $('#navBar');
var perNav = $('#navBar nav');
var borderBlock = $('#navBar #imBorder');
/* onHover events */
perNav.hover(
//mouseover
function() {
//Get the positionX of nav which is hovered.
//Then turn the value to Integer
var offsetX = $(this).position().left;
/* #imBorder change positionX and fadeIn */
borderBlock.css({
'transform': 'translateX(' + offsetX + 'px)',
'opacity': '1'
})
},
//mouseout
function() {
/* #imBorder fadeOut */
borderBlock.css({
'opacity': '0'
})
}
);
})* {
padding: 0;
margin: 0;
}
body {
background: #444;
}
#navBar {
display: block;
width: 324px;
margin: 100px auto 0;
position: relative;
}
#navBar #imBorder {
pointer-events: none;
/* Prevent #imBorder block on top when hovered */
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 102px;
height: 50px;
border: 2px solid #fff;
box-shadow: 0px 0px 7px #fff;
/* for animation */
transition: transform 250ms ease, opacity 300ms ease;
transform: translateX(0);
opacity: 0;
}
#navBar>nav {
width: 100px;
height: 50px;
background: #f00;
color: #fff;
line-height: 50px;
text-align: center;
display: inline-block;
margin: 0 2px;
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="navBar">
<div id="imBorder"></div>
<nav>button1</nav>
<nav>button2</nav>
<nav>button3</nav>
</div>以上是关于在悬停的边界动画的主要内容，如果未能解决你的问题，请参考以下文章