Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Анимация чисел при скролле до элемента (https://javascript.ru/forum/jquery/56976-animaciya-chisel-pri-skrolle-do-ehlementa.html)

min89 13.07.2015 13:49

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

$(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, которое запускает эту самую анимацию в нужном месте. Кто виноват и что делать - не знаю. Заранее Спасибо.

рони 13.07.2015 14:07

min89,
а jQuery то подключено?

min89 13.07.2015 14:13

jQuery 1.8.1, берется из хедера. Повторюсь, что работает все на любой другой странице Этого же сайта. И сама анимация числа работает на нужной странице, только срабатывает не при скролле до элемента, а во время загрузки страницы. На остальных страницах работает безупречно со scrolltop

рони 13.07.2015 14:42

min89,
оберните назначение $(window).scroll в $(window).load(function() {
$(window).scroll ...
})

рони 13.07.2015 14:44

Цитата:

Сообщение от min89
Начнем по порядку - в jsfiddle.net,

проявилибы любопытство на jsfiddle, ненужен былбы совет.

min89 13.07.2015 14:55

Оборачивал, не работает, консоль так же ошибок не выдает.

min89 13.07.2015 14:56

пока что для меня это мистика

рони 13.07.2015 15:07

min89,
нет кода нет совета - но скорее всего у вас нет $


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