我正在寻找一种方法来防止 navitems 2 和 3 在 navitem 1 在鼠标进入和离开时播放其动画时移动，有人知道该怎么做吗？甚至可以按照我尝试的方式来做这件事吗？
https://jsfiddle.net/xLbLrmcq/
这是我的html
<html>
<head>
<title>Art Profile</title>
<script src="jquery-3.1.1.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" href="main.min.css" type="text/css" media="screen">
</head>
<body>
<div class="navbar">
<div class="navitem" id="navitem1">
<div id="navtext1">
Work
</div>
</div>
<div class="navitem" id="navitem2">
Home
</div>
<div class="navitem" id="navitem3">
Contact
</div>
</div>
</body>
</html>
我的 JQuery
$(document).ready(function(){
$('#navitem1').mouseenter(function(){
$('#navitem1').animate({
height: '+=25px',
width: '+=20px',
}).css({
'border-top': '7px solid #008cb1'});
$('#navtext1').css({
'line-height': '3.5em',
'-ms-transition':'.3s',
'-moz-transition':'.3s',
'-webkit-transition':'.3s'
});
}).mouseleave(function(){
$('#navitem1').animate({
height: '-=25px',
width: '-=20px',
}).css({
'border-top': '4px solid #008cb1'});
$('#navtext1').css({
'line-height': '2.5em',
'-ms-transition':'.3s',
'-moz-transition':'.3s',
'-webkit-transition':'.3s'
});
});
});
CSS
body {
font-family: helvetica;
background: #101010;
margin: 0;
padding: 0;
}
.navbar {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.navitem {
display: inline-block;
min-height: 50px;
min-width: 110px;
background-color: #383838;
color: #008cb1;
font-size: 18px;
border-top: 4px solid #008cb1;
line-height: 2.5em;
}
最佳答案
您必须要么删除宽度动画，要么找到一种方法来保持菜单元素居中和对齐而不使用内联 block 。查看下面的 fiddle 示例。
请注意，您还应该删除排队的动画:
$('#navitem1').stop()
检查更新的 fiddle :
关于jquery - 将另一个 div 与动画分开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41072704/