jquery - 在 div 悬停时，div 向上滑动到 div 的底部 3rd

Question

我有 2 个 div，其中一个是隐藏的。一旦你将鼠标悬停在 div 上，隐藏的 div 就会向下滑动，一旦被移除，它就会向上滑动

$("#clickk").hover(function() {
  if ($("#monster").is(":hidden")) {
    $("#monster").slideDown("fast");
  } else {
    $("#monster").slideUp("fast");
  }
});

div#monster {
  background: #de9a44;
  margin: 3px;
  width: 80px;
  height: 60px;
  display: none;
  float: left;
  position: absolute;
}

#clickk {
  width: 80px;
  height: 60px;
  border: 1px solid #cc0001;
  background: transparent;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="monster"></div>
<div id="clickk"></div><br />

我试图让 div 向上滑动，但只能滑动到 div 的底部第 3 部分，并且在不悬停时向下滑动

Answer 1

目前还不是 100% 清楚您要在这里完成的任务，但我试了一下。

您可能需要查看 $.animate(...)而不是 $.slideUp(...)。

我修改了你的代码片段，当你将鼠标悬停在它上面时，将点击 div 向上滑动一定量。

$("#clickk").hover(function() {
  if ($('#monster').hasClass("small")) {
    $('#monster').animate({"height": "60px"}, "medium").removeClass("small");
  } 
  else {
    $('#monster').animate({"height": "20px"}, "meduim").addClass("small");
  }
});

div#monster {
  background: #de9a44;
  margin: 3px;
  width: 80px;
  height: 60px;
  float: left;
  position: absolute;
}

#clickk {
  width: 80px;
  height: 60px;
  border: 1px solid #cc0001;
  background: transparent;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="monster"></div>
<div id="clickk"></div><br />