зациклить функцию
Уважаемые эксперты прошу помощи!
Делаю проверку на величину сколинга на странице, если значение больше 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); } }); }) |
еще актуально((
в ие и хроме работает нормально, в мозиле и опере - нет |
Проблема, видимо, в том, что при скроллинге вы запускаете большое количество анимаций (.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); } }); }); |
Да, вы правы, если поставить алерты, то окошки появляются по 100 раз.
Огромное спасибо вам за код и разжовывание. |
Дабы не открывать новую тему, спрошу здесь.
У меня похожее условие, если положение >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"); } }); |
перед добавлением нового класса, убирайте старый
removeClass |
Спасибо большое!
|
Часовой пояс GMT +3, время: 15:09. |