Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   зациклить функцию (https://javascript.ru/forum/jquery/33817-zaciklit-funkciyu.html)

saxap 09.12.2012 15:35

зациклить функцию
 
Уважаемые эксперты прошу помощи!
Делаю проверку на величину сколинга на странице, если значение больше 500 - показываем див, если нет - убираем.
Но проблема в том что в опере функция срабатывает 1 раз - див появляеться и остается там навсегда даже, если скролинг = 0, причем если вставить алерты, то все работает.
вот код:
$(document).ready(function(){
 $(window).scroll(function(){
   var y = $(window).scrollTop();
  if( y > 500 ){
   $("div.div").delay(500).fadeIn(500);
  } else {
  $("div.div").fadeOut(500);
  }
 });
})

saxap 10.12.2012 19:05

еще актуально((
в ие и хроме работает нормально, в мозиле и опере - нет

Amphiluke 10.12.2012 20:31

Проблема, видимо, в том, что при скроллинге вы запускаете большое количество анимаций (.fadeIn(), .fadeOut()). Например, достигая величины прокрутки в 500px, вы запускаете .fadeIn(), и если продолжать прокручивать страницу, .fadeIn() будет вызываться всё снова и снова (т.к. условие y > 500 выполняется), и очередь анимаций будет расти.
Как вариант, можно добавить проверок, чтобы избежать повторных вызовов.
$(document).ready(function(){
 var showing = false;
 $(window).scroll(function(){
   var y = $(window).scrollTop(),
       div = $("div.div"),
	   isVisible = div.is(":visible");
  if (y > 500 && !showing) {
	showing = true;
    div.delay(500).fadeIn(500);
  } else if (y < 500 && isVisible && showing) {
	showing = false;
    div.fadeOut(500);
  }
 });
});

saxap 10.12.2012 22:07

Да, вы правы, если поставить алерты, то окошки появляются по 100 раз.
Огромное спасибо вам за код и разжовывание.

Mateus 11.12.2012 14:09

Дабы не открывать новую тему, спрошу здесь.
У меня похожее условие, если положение >240 то стиль box3,
если положение <240, то стиль box4

Но стиль меняется только 1 раз. Вот код:

$(document).ready(function(){

var y = $(window).scrollTop(),
div = $("div.div");
if (y > 240 && !showing) {
$('#hit').addClass("box3");
} else if (y < 240 && !showing) {
$('#hit').addClass("box4");
}
});

Margarita 11.12.2012 19:55

перед добавлением нового класса, убирайте старый
removeClass

Mateus 12.12.2012 12:33

Спасибо большое!


Часовой пояс GMT +3, время: 15:09.