如何使用 jQuery 创建导航动画答案

【问题标题】：How to create navigation animation with jQuery如何使用 jQuery 创建导航动画
【发布时间】：2019-12-16 06:29:51
【问题描述】：

我正在尝试使用 jQuery 创建一个动画，当用户将鼠标悬停在由 id 'navigation' 标识的列表项上时，它允许气泡出现在悬停事件上。我创建了一个由 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>

【问题讨论】：

仅供参考：这里有一个错字：MySQL<a/> 结束斜线应该在字母 a 之前
你最好提供jsfiddle..
对我来说看起来不错...jsfiddle.net/my5aad9d :).. ** 只是缺少我必须添加的 jquery UI 以实现缓动效果 **.. ;)

标签： jquery css

【解决方案1】：

设法使它工作。看这里：Jsfiddle

您必须在项目中包含 jquery-ui 才能获得扩展的缓动选项。

在<head> 部分添加<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>（连同jQuery 库）

还有。 <li><a href="#">MySQL<a/></li>不正确，改成<li><a href="#">MySQL</a></li>

让我知道它是否有效。干杯

评论后编辑

如果你希望你的列表是垂直的，并且li 有width:auto（其中的文本）设置li{display:list-item}

然后，为了让效果垂直移动而不是水平移动（就像之前的小提琴一样），将 JQ left 更改为 top。

这里 > left: $(this).position().left 到 top: $(this).position().top（此代码出现在 2 个地方）

PS。您在 HTML 中设置了 ol = 有序列表而不是 ul 。如果您将其更改为ul，请同时更改 CSS ul 而不是 ol

看这里Verical Blob Jsfiddle

【讨论】：

谢谢。我刚刚查看了 Jsfiddle 并意识到我误解了一些东西。导航列表不是内联的，而是一个垂直列表。在查看了您的代码后，我发现您已经成功地将我带到了它的工作点，但前提是列表类型是内联的，否则“blob”在鼠标悬停时不会垂直移动。我们能解决这个问题吗？抱歉，我是新手.. :(