Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.07.2015, 13:49
Новичок на форуме
Отправить личное сообщение для min89 Посмотреть профиль Найти все сообщения от min89
 
Регистрация: 13.07.2015
Сообщений: 4

Анимация чисел при скролле до элемента
Здравствуйте, есть скрипт

$(window).scroll(function () {
  var scrTop = $(window).scrollTop();
    if(scrTop>$('.statistik').offset().top - $(window).height()  ) {
        numAnimate();
    }
});
function numAnimate () {
$('.years').animate({ num: 14 - 1 }, {
    duration: 3000,
    step: function (num){
        this.innerHTML = (num + 1).toFixed(0)
    }
});
$('.m2').animate({ num: 102763 - 3 }, {
    duration: 3000,
    step: function (num){
        this.innerHTML = (num + 3).toFixed(0)
    }
});
$('.peoples').animate({ num: 837 - 3 }, {
    duration: 3000,
    step: function (num){
        this.innerHTML = (num + 3).toFixed(0)
    }
});
};


а html код

<div class="block">
<div class="numbers statistik">
<div class="col left">
<div class="num years">14</div>
<div class="name"></div>
</div>
<div class="col center">
<div class="num m2">102763</div>
<div class="name"></div>
</div>
<div class="col right">
<div class="num peoples">837</div>
<div class="name"></div>
</div>
</div>
</div>


Суть его в том, что при скролле до класса .statistik срабатывает анимация чисел в классах .years .m2 .peoples.

Только работает он не везде, что очень странно, разобраться сам не смог. Скрипт расположен на главной странице сайта, сам сайт работает на вордпресс. Так же на данной странице подключены - скрипт wow.js и animate.css. Проблема в том, что скрипт работает абсолютно везде. Начнем по порядку - в jsfiddle.net, на любой другой странице сайта, на любых страницах html сайтов, просто из index.html, набросанного в notepad++, в любом браузере и устройстве.

Но категорически не хочет работать на той странице, для которой ему уготовано место. Уже и отключал wow.js, animate.css, менял привязку к классам и сами классы, думая, что есть такие же в шапке\на первом-втором экране (что заставляло бы срабатывать скрипт раньше). Но нет, дело не в этом. Хедер и футер, а так же все что есть на этой странице, идентично на остальных, за исключением контента, состоящего из div.

Работает даже и анимация числа, но не событие scroll, которое запускает эту самую анимацию в нужном месте. Кто виноват и что делать - не знаю. Заранее Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 13.07.2015, 14:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

min89,
а jQuery то подключено?
Ответить с цитированием
  #3 (permalink)  
Старый 13.07.2015, 14:13
Новичок на форуме
Отправить личное сообщение для min89 Посмотреть профиль Найти все сообщения от min89
 
Регистрация: 13.07.2015
Сообщений: 4

jQuery 1.8.1, берется из хедера. Повторюсь, что работает все на любой другой странице Этого же сайта. И сама анимация числа работает на нужной странице, только срабатывает не при скролле до элемента, а во время загрузки страницы. На остальных страницах работает безупречно со scrolltop
Ответить с цитированием
  #4 (permalink)  
Старый 13.07.2015, 14:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

min89,
оберните назначение $(window).scroll в $(window).load(function() {
$(window).scroll ...
})
Ответить с цитированием
  #5 (permalink)  
Старый 13.07.2015, 14:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

Сообщение от min89
Начнем по порядку - в jsfiddle.net,
проявилибы любопытство на jsfiddle, ненужен былбы совет.
Ответить с цитированием
  #6 (permalink)  
Старый 13.07.2015, 14:55
Новичок на форуме
Отправить личное сообщение для min89 Посмотреть профиль Найти все сообщения от min89
 
Регистрация: 13.07.2015
Сообщений: 4

Оборачивал, не работает, консоль так же ошибок не выдает.
Ответить с цитированием
  #7 (permalink)  
Старый 13.07.2015, 14:56
Новичок на форуме
Отправить личное сообщение для min89 Посмотреть профиль Найти все сообщения от min89
 
Регистрация: 13.07.2015
Сообщений: 4

пока что для меня это мистика
Ответить с цитированием
  #8 (permalink)  
Старый 13.07.2015, 15:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

min89,
нет кода нет совета - но скорее всего у вас нет $
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Появление исчезновение элемента при прокрутке страницы JQuery -=Женька=- Общие вопросы Javascript 3 29.06.2014 17:18
autocomplete, обработка элемента списка при фокусе culver jQuery 12 29.06.2014 14:52
Анимация высоты элемента, проблема со скроллингом malgeorge Events/DOM/Window 4 16.05.2013 09:34
Скрытие элемента при клике вне этого элемента astrogator Общие вопросы Javascript 4 11.05.2013 21:24
раскрывать/скрывать <td> при выборе определенного элемента списка zip Элементы интерфейса 2 19.01.2009 13:58