javascript - 为什么这个 jQuery 动画会上下跳跃？

Question

CSS 或多或少是无关紧要的。如何停止跳跃？

jQuery(function() {
  jQuery("#showquickfind").mouseover(function() {
    jQuery("#quickfind").animate({
      height: "show",
      opacity: "show"
    }, "slow");
    return false;
  });
  jQuery("#quickfind").hover(function() {},
    function() {
      $("#quickfind").animate({
        opacity: 1.0
      }, 1125).slideUp(375);
      return false;
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="" id="showquickfind">show me</a>

<div id="quickfind">
  <ul>
    <li>test</li>
    <li>test2</li>
    <li>test3</li>
  </ul>
</div>

Answer 1

您可能想查看链接 jQuery.stop()每个动画命令之前的命令。它停止指定元素上当前正在运行的所有动画。即

jQuery("#quickfind").stop().animate({ 
    height:"200px", opacity: 1},"slow"); 
    return false;

您使用 jQuery 而不是 jQuery 对象的简写 $ 是有原因的吗？即使使用其他使用它的库，也可以按照以下模式使用 $ 简写来表示 jQuery 对象 -

(function($) {

//Your code here using $ shorthand for jQuery :)

})(jQuery);

这意味着外部函数范围内的 $ 是 jQuery 对象的引用。

我已经设置了your code on this sample page 。如果要编辑它，请在 URL 中添加“/edit”。

此外，您确定“show”是高度和不透明度的有效值吗？

我的理解是，高度需要设置为自动(即包含 block 的大小)、长度或相对于包含 block 的百分比，以及不透明度应该是 0 到 1 之间的值(jQuery 抽象了浏览器之间的差异，并将使用合适的不透明度属性即 opacity 或 filter:alpha(opacity))