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向上滑动一定数量。

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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 />

＆＃13;

在div悬停时，div滑到div的底部3

1 个答案: