0

我在工作中使用 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 调用的总和“之后”进行了所有操作，更新了页面。因此，结果与横幅从展开尺寸缩小到原始尺寸完全一样。

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

任何帮助将不胜感激。

提前致谢

4

1 回答 1

1

您设置超时的循环只是将 89 个计时器设置为比循环运行晚一秒钟，并且循环将以毫秒为单位运行 - 所以它们都会在大约一秒钟后触发。这听起来不像你想要做的。

两种选择：

1.使用animate

jQuery 的animate功能似乎可以满足您的需求。您可以告诉 jQuery 为大小变化设置动画，并告诉它这样做需要多长时间：

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

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

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（除其他外）。如果不熟悉，不要担心“闭包”这个词，闭包并不复杂。

单独：您将mouseover在一秒钟后设置 trial_center 元素的高度；你可能想要mouseneter而不是mouseover. mouseover鼠标在其上移动时重复。

题外话：

最好不要将字符串与setTimeout;一起使用。只需将其传递给函数引用即可。例如，而不是

setTimeout("retro()", 1000);

你会用

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

而对于您正在使用的其他地方，而不是

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

你会用

setTimeout(function() {
    jQuery('#trial_center').css('height', '500px');
}, 1000);
于 2010-12-29T13:08:33.180 回答