Проблема с javascript-скриптом jQuery в OpenX - PullRequest
Новая
       3

Проблема с javascript-скриптом jQuery в OpenX

0 голосов
/ 29 декабря 2010

Я использую 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, обновив страницу. Таким образом, в результате получается, что баннер сжимается один раз от увеличенного размера до исходного размера.

Я не знаю, что с этим не так или есть другое, более разумное решение.

Любая помощь будет очень признателен.

Заранее спасибо

1 Ответ

1 голос
/ 29 декабря 2010

Ваш цикл, устанавливающий время ожидания, просто устанавливает 89 таймеров на одну секунду позже, чем цикл работает, и цикл будет работать в миллисекундах & mdash; так что все они будут стрелять через секунду. Это не похоже на то, что вы хотите сделать.

Два варианта для вас:

1. Используйте animate

Функция jQuery animate кажется, что она делает то, что вы хотите. Вы можете указать jQuery анимировать изменение размера и указать, сколько времени потребуется для этого: 

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

Это оживит изменение высоты контейнера от того, где он находится, в точке, где код выполняется до 500 пикселей, в течение 1000 миллисекунд (одна секунда). Очевидно, вы можете изменить продолжительность на любую, что вам нравится.

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 повторяется, когда мышь перемещается по нему.

Off-тема

Лучше не использовать строки с 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);
...