我正在尝试使用 jQuery 创建一个动画，当用户将鼠标悬停在由 ID“导航”标识的列表项上时，它允许在悬停事件上出现一个气泡。我创建了一个由 id 'navigation_blob' 标识的 div，我希望它出现在悬停的每个元素上。然而，出于某种原因，高度保持在 0。
$(document).ready(function() {
$('<div id="navigation_blob"></div>').css({
width: 0,
height: $('#navigation li:first a').height() + 10
}).appendTo('#navigation');
$('#navigation a').hover(
function() { // Mouse over function
$('#navigation_blob').animate({
width: $(this).width() + 10,
left: $(this).position().left
}, {
duration: 'slow',
easing: 'easeOutElastic',
queue: false
});
},
function() { // Mouse out function
$('#navigation_blob').animate({
width: $(this).width() + 10,
left: $(this).position().left
}, {
duration: 'slow',
easing: 'easeOutCirc',
queue: false
});
}
);
});#head {
padding-left: 20px;
}
#navigation {
margin: 0 0 10px 0;
padding: 0;
list-style-type: none;
position: relative;
z-index: 1;
/* overwrite base */
float: none;
width: 100%;
}
#navigation ul {
margin: 0;
padding: 0;
}
#navigation li {
display: inline;
margin: 0;
padding: 0;
}
#navigation a {
color: #015287;
display: inline-block;
padding: 5px;
text-decoration: none;
}
#navigation_blob {
top: 0;
background-color: #c0ffee;
position: absolute;
z-index: -1;
border-radius: 15px;
}
p#intro {
clear: both;
margin-top: 10px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="key-technical-skillsets">
<h5>Key Technical Skill Sets</h5>
<div id="navigation">
<ol>
<li><a href="#">jQuery</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL<a/></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Adobe Photoshop</a></li>
<li><a href="#">Wordpress</a></li>
</ol>
</div>最佳答案
设法让它发挥作用。看这里: Jsfiddle
你必须包括jquery-ui在您的元素中获取扩展缓动选项。
添加<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>在<head>部分(连同 jQuery 库)
还有。 <li><a href="#">MySQL<a/></li>不正确，改成<li><a href="#">MySQL</a></li>
让我知道它是否有效。干杯
评论后编辑
如果您希望您的列表是垂直的，并且 li有 width:auto (里面的文字)设置li{display:list-item}
然后，为了使效果垂直移动而不是水平移动(就像在之前的 fiddle 中一样)，更改 JQ left至 top .
这里> left: $(this).position().left至 top: $(this).position().top (这段代码出现在2处)
附言。你已经在你的 HTML 中设置了一个 ol = 有序列表不是 ul .如果将其更改为 ul CSS 也有变化 ul而不是 ol
关于jquery - 如何使用 jQuery 创建导航动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39229012/