Question

我正在尝试按下一个按钮，按下该按钮会使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>

当我将鼠标悬停在按钮/图像上时，会按预期放大。但是，当我点击它时没有任何反应。我没有在控制台中看到任何错误，搜索谷歌没有发现任何错误。

我该如何解决这个问题？

Answer 1

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

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

根据.animate() documentation：

定向属性（top，right，bottom，left）无法辨别如果position样式属性为static，则对元素产生影响它是默认的。

JQuery单击方法不起作用

1 个答案: