Question

我编写了以下内容，但发现高度检查语句无法正常工作。

如果元素#tube的高度低于10，我正试图让事情发生。

点击时，元素高度#tube会受到影响。 console.log向我显示当前高度的元素，因此我知道可以获得高度的值。

但由于某些原因，它只是不起作用 - 可能是由于糟糕的jQuery语法（不确定该术语应该是什么）会非常感谢任何帮助。

$(document).ready(function() {
  var $circle = $(".circle"),
    $tube = $("#tube"),
    $boob = $("#boob"),
    $bigCircle = $("#bigCircle"),
    tubeMinHeight = 10;

  $boob.hide();
  $circle.draggable();
  $bigCircle.click(function() {
    $(this).effect("shake", "slow");
    $("body").jGravity({
       target: ".circle",
       ignoreClass: "#bigCircle",
       weight: 25,
       depth: 1,
       drag: true
    });
  });

  $tube.droppable({
    drop: function(event, ui) {
      ui.draggable.hide(200);
      $tube.animate({
        height: "+=10"
      }, 'slow', 'easeOutBounce');
      $tube.click(function() {
        $tube.animate({
          height: "-=10"
        }, 'fast', 'easeOutBounce');

        /* if statement below in question! */
        if ( $tube.height() === 0 ) {
           $boob.show(100);
           console.log("working");
        }
      });
    }
  });

  $("#button").click(function(){
     console.log( $tube.height() );
  }); 
});

我对jQuery / Javascript很新，所以我给自己做了很少的练习。 Layman的条款将不胜感激！

以下是练习的链接 - http://codepen.io/ianranasinghe/pen/XdpZNN？

Answer 1

您的问题是您使用分号结束if语句的结束括号。如果语句不需要用分号结束。

if ( $(tube).height() === 0 ) {
  $(boob).show(100);
  console.log("working");
}//notice no semicolon

没有更多代码，例如HTML文档，这就是我看错了。

Answer 2

您遇到的问题与异步运行的动画有关：

看看代码的这一部分：

 $(tube).animate({
     height: "-=10"
 }, 'fast', 'easeOutBounce');

 if ( $(tube).height() === 0 ) {
     $(boob).show(100);
     console.log("working");
 };

animate method会在您调用它时启动，但不会立即用10来降低高度。该方法只会安排setTimeout逐渐减小高度，但会立即返回。因此，实际的高度降低将在稍后发生，即在当前运行的代码的其余部分结束之后。

这意味着您的0测试将始终返回false。

然后，当高度确实变为0后不久，您就不能再单击该元素，因此当高度实际为0时，此代码将永远不会运行。

幸运的是，jQuery可以在动画完成时通知您;您可以传递回调，如下所示：

 $(tube).animate({
     height: "-=10"
 }, 'fast', 'easeOutBounce', function () {
     // if we get here, the animation has finished
     if ( $(tube).height() === 0 ) {
         $(boob).show(100);
         console.log("working");
     };
 });

请注意，目前您每次在管元素上放置click事件处理程序时都会分配它。这不是意图。只需在drop handler之外定义一次。

Answer 3

.animate()需要一段时间才能完成，但代码不会等待它。以下if在动画开始后立即运行，而不是在动画结束后运行，如您所愿：

$tube.animate({
    height: "-=10"
}, 'fast', 'easeOutBounce');

if ( $tube.height() < tubeMinHeight ) {
   $boob.show(100);
}

为了让它在动画结束后运行，jQuery允许你在队列中放置一个回调函数，如下所示：

$tube.animate({
    height: "-=15"
}, 'fast', 'easeOutBounce', function () {
  if ( $tube.height() < tubeMinHeight ) {
     $boob.show(100);
  }
});

请参阅此实例（展开并运行）：

$(function () {
  $("#foo").click(function () {
    $(this).animate({
        height: "-=20"
    }, 'fast', 'swing', function () {
      if ( $(this).height() < 100 ) {
         $("#bar").show(100);
      }
    });
  });
});

#foo {
  width: 200px;
  height: 150px;
  background-color: red;
}
#bar {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Click the rectangle a few times:
<div id="foo"></div>
<div id="bar">Now it's less than 100px!</div>

请参阅documentation on .animate()。

如何在调用jQuery动画后检查元素高度

3 个答案: