Question

我制作了一个小而简单的代码，可以上下移动div图层200像素。但我想让它在点击而不是鼠标悬停时移动图层。 mouseleave还可以！

如何检查图层是向上还是向下。我想仅在图层上升200px时才移动图层-200px。

<script>
  $(".block").mouseenter(function() {
   $(".block").animate({"bottom": "+=200px"}, 300);
  }).mouseleave(function() {
      $(".block").animate({"bottom": "-=200px"}, 200);
  });
</script>

Answer 1

使用课程

<script>
  $(".block").click(function() {
   $(".block").not('.up').addClass('up').animate({"bottom": "+=200px"}, 300);
  }).mouseleave(function() {
   $(".block").filter('.up').removeClass('up').animate({"bottom": "-=200px"}, 200);
  });
</script>

Answer 2

<script>
  var direction = 1;
  var distance = 200;
  $(".block").click(function() {
   $(".block").animate({"bottom": "+=" + direction * distance + "px"}, 300);
   direction -= direction * 2; // knew there was a formula for that :P
  });
</script>

那会有用。

Answer 3

您是否尝试使用'.click'代替'.mouseenter'？

单击时移动div图层

3 个答案: