Question

即使控制台日志将while表达式设为false，循环也会运行。

var tile_height;
$(document).ready(function(){
tile_height = $("#department > .front").height();
        });
        function tile_animate(e){
        console.log(($('> .front',e).css("height") > '0px') && ($('> .back',e).height() < tile_height));
        while(($('> .front',e).css("height") > '0px') && ($('> .back',e).height() <  tile_height)) 
            {
                $('> .front',e).animate({height: '-=1px'});
                $('> .back',e).animate({height: '+=1px'});
            }
        }

我尝试使用if语句作为递归函数，但这也不起作用。使用while会导致浏览器停止响应。调用该函数的html代码是

HTML代码

<div class="tiles" id="gallery" onmouseover="javascript:tile_animate(this)">
    <div class="front">
    </div>
    <div class="back">
    </div>
</div>

Answer 1

由于您使用的是jQuery，为什么不直接嵌入代码并从JS中的事件处理程序触发函数：

var tile_height;

$(document).ready(function() {
  tile_height = $("#department > .front").height();
  $("#gallery").mouseover(function() {
    e = this;
    console.log(($('> .front', e).css("height") > '0px') && ($('> .back', e).height() < tile_height));
    while (($('> .front', e).css("height") > '0px') && ($('> .back', e).height() < tile_height)) {
      $('> .front', e).animate({
        height: '-=1px'
      });
      $('> .back', e).animate({
        height: '+=1px'
      });
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<div class="tiles" id="gallery">
  <div class="front">front</div>
  <div class="back">back</div>
</div>

Answer 2

Javascript是单线程的。特别是你的代码必须在另一个线程可以启动之前完成执行。你真正感兴趣的另一个线程是Jquery的动画循环，它默认循环在一个14毫秒的计时器线程上。

因此你的while循环无限运行，因为动画代码永远不会运行以减小你正在测试的高度，并期望达到零。

Answer 3

问题是您在悬停时使用循环。更好的是，你在一个样式中使用jQuery动画并在必要时应用它。

但是，你描述问题的方式，看起来你会缩小div一次 - 之后没有什么可以恢复它。我注意到div被命名为'department'，但是JavaScript正在寻找'gallery' - 所以我改变了......

因此，要在现在拥有代码时执行此操作，需要进行一些调整：

移除while循环并在悬停时执行检查。

检查是否已经发生动画。

如果动画正在发生，请忽略悬停。

如果动画尚未发生，请设置一个标记，表示它是，然后执行所需的动画 - 不要逐像素地减小div的大小（这就是动画为你做的）。

完成后，div的高度为0px（不能再悬停）。

如果您想稍后恢复div，则在动画之前存储其原始尺寸，并在需要时恢复它们（不要忘记重置inLoop变量）...

var tile_height;
var inLoop = false;
$(document).ready(function() {
  tile_height = $("#gallery > .front").height();
});

function tile_animate(e) {
  if (!inLoop && ($('> .front', e).css("height") > '0px') && ($('> .back', e).height() < tile_height)) {
    inLoop = true;
    $('> .front', e).animate({
      height: '0px'
    });
    $('> .back', e).animate({
      height: tile_height
    });
  }
}

Javascript导致浏览器挂起

3 个答案: