为什么还要为回调函数再显示一行？

Question

$(document).ready(function() {
  $("h1+p").hide();
  $("h1").hover(function() {
      $("+p", this).show(6000, function() {
        $(this).append("<p>animation is completed</p>");
      });
    },
    function() {
      $("+p", this).hide(6000);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>introduction</h1>
<p id="pp">it is a test</p>

这是一个简单的动画效果，当鼠标进入it is a test标签时，h1将在6秒内显示，而animation is completed将作为回调函数的结果显示。
有时我在Chrome上运行它，animation is completed以两行或更多行显示，为什么？
在此过程中，在h1标签上移动鼠标后，我不移动鼠标。

Answer 1

问题在于您只是在追加<p>animation is completed</p>。这意味着，每当您将光标悬停在元素上时，它将添加另一个“动画完成”。试试这个：

$(document).ready(function() {
  $("h1+p").hide();
  $("h1").hover(function() {
      $("+p", this).show(6000, function() {
        $(this).append("<p>animation is completed</p>");
      });
    },
    function() {
      $("+p", this).hide(6000);
      $("p").not("#pp").remove();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>introduction</h1>
<p id="pp">it is a test</p>

Answer 2

这是因为每次将鼠标悬停时都会添加一个新的“ animation is completed”字符串：

$(this).append("<p>animation is completed</p>");

您要做的就是事后隐藏字符串，而不是删除它：

$("+p", this).hide(1000);

因此，每次将鼠标悬停在h1元素上时，您将获得该字符串+ 1。

---

您可以使用以下方法解决此问题：

    $(document).ready(function() {
        $("h1+p").hide();

        $("h1").hover(function() {
            $("+p", this).show(1000, function() {
                $(this).append("<p class='notice'>animation is completed</p>"); // "notice" class
            });
        },
        function() {
            $("+p", this).hide(1000, function() {
                $(".notice").remove(); // remove "notice" class element
            });

        });
    });

Answer 3

因为此行$(this).append("<p id='anim'>animation is completed</p>");将继续在ID为p的dom内追加新的pp。您可以使用remove方法删除任何子元素

$(document).ready(function() {
  $("h1+p").hide();
  $("h1").hover(function() {
      $("+p", this).show(3000, function() {
        $(this).append("<p id='anim'>animation is completed</p>");
      });
    },
    function() {
      $("+p", this).hide(3000);
      $("#pp").find("#anim").remove()
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>introduction</h1>
<p id="pp">it is a test</p>