OpenX 中 javascript jQuery 脚本的问题

Question

我在工作中使用 OpenX，我老板的要求之一是可扩展的横幅。为此（并对整个故事进行了可怕的简化）我制作了这个脚本。

function retro(){
  var acs = jQuery('#trial_center').height() - 5;
  jQuery('#trial_center').css('height', acs + 'px');    
}
jQuery(document).ready(function(){
  jQuery("#trial_center").mouseover(function(){
   setTimeout("jQuery('#trial_center').css('height', '500px')", 1000);                      
})
jQuery("#trial_center").mouseleave(function(){    
  var c = 89;    
  while (c > 0) {  
    setTimeout("retro()", 1000);   
    c--;
  }
 })
}); 

我遇到的问题是在 mouseleave 事件中：最初的想法是多次循环（89 次），并且每次都减小横幅的高度，直到达到原始大小。为什么会这样？因为我的老板想要一个“效果”，而且这个效果必须与客户的闪光灯同步。 问题在于，脚本显然没有逐渐减小其大小，而是将所有操作都设置为 setTimeout 调用总和“之后”，并更新了页面。因此，结果与横幅从展开尺寸缩小一倍到原始尺寸完全相同。

我不知道这有什么问题，或者是否存在其他更智能的解决方案。

任何帮助将非常感激。

提前致谢

Answer 1

您的循环设置超时只是在循环运行后设置 89 个计时器一秒，并且循环将以毫秒为单位运行 - 因此它们将在大约一秒后全部触发。这听起来不像你想做的事。

有两种选择：

1. 使用 animate

jQuery 的 animate 函数 看起来它符合你的要求。您可以告诉 jQuery 以动画方式显示大小更改，并告诉它需要多长时间才能执行此操作：

jQuery('#trial_center').animate({
    height: "500px" // Or whatever the desired ending height is
}, 1000);

这将在 1,000 毫秒的过程中以动画方式将容器的高度从代码运行时的高度更改为 500px （一秒钟）。显然，您可以将持续时间更改为您喜欢的任何时间。

2. 手动设置定时器循环

如果出于某种原因你不想使用animate，你可以手动执行此操作（当然可以；jQuery 不能做任何你不能做的事情你自己，这只会让事情变得更容易）。设置计时器循环的方法如下：

jQuery("#trial_center").mouseleave(function(){    
  var c = 89;

  // Do the first one right now, which will schedule the next
  iteration();

  // Our function here lives on until all the iterations are
  // complete
  function iteration() {
    // Do one
    retro();

    // Schedule this next unless we're done
    if (--c > 0 {
      setTimeout(iteration, 100); // 100ms = 1/10th second
    }
  }
});

之所以有效，是因为 iteration 是对 c 的闭包（除其他外）。如果“闭包”这个词不熟悉，请不要担心，闭包并不复杂。

---

单独：您稍后使用鼠标悬停来设置 Trial_center 元素的高度；您可能想要 mouseneter 而不是 mouseover。当鼠标移过它时，mouseover 会重复。

---

跑题：

setTimeout最好不要使用字符串；只需传递一个函数引用即可。例如，对于

setTimeout("retro()", 1000);

可以使用

setTimeout(retro, 1000); // No quotes, and no ()

您正在使用的其他地方，您

setTimeout("jQuery('#trial_center').css('height', '500px')", 1000);

And 而不是使用

setTimeout(function() {
    jQuery('#trial_center').css('height', '500px');
}, 1000);