JQuery点击方法不起作用

我正在尝试在中心按下一个按钮，使 div 中的所有元素向上滑动。

$(document).ready(function() {
  $("#imgs").click(function() {
    $("#start").animate({
      bottom: "+=250px"
    }, "slow");
  });
});

#imgs {
  display: block;
  margin: 0 auto;
  opacity: 1.0;
  filter: alpha(opacity=100);
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  bottom: 0px;
}
#imgs:hover {
  opacity: 1;
  filter: alpha(opacity=100);
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
}
html {
  width: 100%;
  height: 100%;
  clip: auto;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<body style="margin:0;">

  <div id="start" style="bottom:0px">
    <img src="saint die.jpg" style=" z-index:-20; width:150%; position:absolute">
    <div align="center" style="bottom:69%; position:absolute; width:45%; left:28%; ;">
      <img src="DELICETEXT.png" alt="delice" style="width:100%">
    </div>
    <div id="imgs" align="center" style="position:absolute; width:25%; height: 25%; left:38%; top:30%;">
      <img src="delice.png" alt="L'arbre a Delices" style="width:100%; position: relative;">
    </div>
  </div>
</body>

当我将鼠标悬停在按钮/图像上时，它会按预期放大。但是，当我单击它时没有任何反应。我在控制台中没有看到任何错误，并且在 Google 上搜索也没有任何结果。

我该如何解决这个问题？

最佳答案

如果要为 top、right、bottom 设置动画，则必须为元素指定一个位置以允许 animate 移动它，或 left 属性:

<div id="start" style="bottom:0px; position:relative;">

根据 .animate() documentation :

Directional properties (top, right, bottom, left) have no discernible effect on elements if their position style property is static, which it is by default.

关于JQuery点击方法不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39110785/

JQuery点击方法不起作用

上一篇：html - 如何阻止无序列表移动到下一行

下一篇：javascript - 记住之前是否运行过 javascript，如果它是 [EnjoyHint.js]，则不再运行它