Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.50/4: Рейтинг темы: голосов - 4, средняя оценка - 4.50
Эксперт JS
2037 / 1096 / 409
Регистрация: 29.04.2016
Сообщений: 2,625

Ошибка Jquery-animation?

19.03.2018, 13:09. Показов 770. Ответов 1
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Здравствуйте уважаемые форумчане!

По ссылке: https://jsfiddle.net/xrqrbcd8/4/ находится таймер обратного отсчета.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div class="timer">
    
    <div class="time">
        <div class="CurPre">
            <div class="pre"></div>
            <div class="cur"></div>
        </div>
        <div class="spaceCurPreT"></div>
        <div class="CurPre">
            <div class="pre"></div>
            <div class="cur"></div>
        </div>
        <div class="del">:</div>
        <div class="CurPre">
            <div class="pre"></div>
            <div class="cur"></div>
        </div>
        <div class="spaceCurPreT"></div>
        <div class="CurPre">
            <div class="pre"></div>
            <div class="cur"></div>
        </div>
        <div class="del">:</div>
        <div class="CurPre">
            <div class="pre"></div>
            <div class="cur"></div>
        </div>
        <div class="spaceCurPreT"></div>
        <div class="CurPre">
            <div class="pre"></div>
            <div class="cur"></div>
        </div>
    </div>
 
</div>
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
var interv;
interv = setInterval(timeZ,1000); var intervTimeZ=true;
 
var YourDate = 'feb 10,2033 00:00:00';
 
var alignT=false;
var spAnim = 450;
var top = 5;
var han = Number($('.cur').height() + top);
 
var can = 1; var count; var anim = []; var y = 0;
 
function timeZ(){
    commonTime = Date.parse(YourDate)/1000;
    time = commonTime - Math.floor(new Date().getTime()/1000);
    year = String(Math.floor(time / 31536000));                             rest = time - (31536000 * year);
    month = String(Math.floor(rest / 2678400));                             rest = rest - (2678400 * month);
    day = String(Math.floor(rest / 86400));                                 rest = rest - (86400 * day);
 
    hour = String(Math.floor(rest / 3600));         rest = rest - (3600 * hour);
    min = String(Math.floor(rest / 60));
    sec = String(rest - (60 * min));
    if(hour<=9){hour='0'+hour;} if(min<=9){min='0'+min;} if(sec<=9){sec='0'+sec;}
    hour = hour.split(""),      min = min.split(""),        sec = sec.split("");
    
    $('.time > .CurPre > .cur').each(function (i,el) {
        if(i==0){ $(this).html(hour[0]); }      if(i==1){ $(this).html(hour[1]); }
        if(i==2){ $(this).html(min[0]); }       if(i==3){ $(this).html(min[1]); }
        if(i==4){ $(this).html(sec[0]); }
    });
 
    if(!alignT){
        $('.time > .CurPre > .cur').each(function (i,el) {
            if(i==5){ $(this).html(sec[1]); }
            alignT=true;
        });
    }
 
    if(sec[1]==9){
        can++;
    }
 
    count = ($('.cur').length-1)-can;
    anim = [hour[0],hour[1],min[0],min[1],sec[0],sec[1]];
 
    whichAnim();
}
 
function whichAnim(){
    y++;
    if(y==1){ animTimer1(); }
    if(y==2){ animTimer2(); y=0;}
}
function animTimer1(){
    $('.cur').each(function (i,el){
        if(i > count){
            $('.pre:eq('+i+')').text(anim[i]);
            $('.pre:eq('+i+')').animate({ marginTop : top+'px' }, spAnim, function() {
                $('.cur:eq('+i+')').animate({ marginTop : (-han*2)-top+'px' }, 0);
            });
            if(can>1){can=1;}
        }
    });
}
 
function animTimer2(){
    $('.cur').each(function (i,el){
        if(i > count){
            $('.cur:eq('+i+')').text(anim[i]);
            $('.pre:eq('+i+')').animate({ marginTop : han+(top*2)+'px' }, spAnim, function() {
                $('.pre:eq('+i+')').animate({ marginTop : -han+'px' }, 0);
                $('.cur:eq('+i+')').animate({ marginTop : top+'px' }, 0);
            });
            if(can>1){can=1;}
        }
    });
}
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
html, body{margin: 0px;background-color: #20262e;}
 
.timer{
    width: 210px;
    margin: 10px auto 0px auto;
    font-family: Comic Sans MS;
    font-size: 20px;
    color:  #fff;
    cursor:  default;
    text-align:  center;
    line-height: 40px;
    border-radius: 10px;
    cursor:  default;
}
 
.time{
    width: 174px;
    height: 50px;
    margin: 0px auto 0px auto;
    color: #ffffff;
    padding: 10px 0px 10px 0px;
}
 
.CurPre{
    width: 25px;
    height: 50px;
    float:  left;
    overflow:  hidden;
    margin: 0px 0px 0px 0px;
}
 
.pre,.cur{
    width: 92%;
    height: 40px;
    float: left;
    background-color: #3F51B5;
    border-radius: 3px;
    box-shadow: inset 1px 1px 3px 0px rgba(255, 255, 255, 0.5);
}
 
.pre{
    margin: -45px 0px 5px 0px;
}
.cur{
    margin: 5px 0px 0px 0px;
}
 
.del{
    width: 9px;
    float:  left;
    line-height: 47px;
    margin-left: 0px;
    text-indent: 0px;
}
 
.spaceCurPreT{
    width: 2px;
    height: 5px;
    float: left;
}
Смысл в том что когда на последней плашке 0 нужно анимировать еще и предыдущую плашку, предварительно сгенерировав для нее соответствующую цифру. В приведенном коде за это отвечает переменная "can": если вторая секундная цифра является "0" то добавить can единицу, далее через цикл анимируется соответствующее количество (can) плашек сгенерировав для них соответствующую цифру, далее "can" сбрасывается на единицу что бы снова анимировалась только одна секундная плашка. В анимации или в цикле, или еще почему, я что-то делаю не так, никак не могу понять что именно.
Если после анимации двух плашек не приводить can к единице то анимация работает правильно, но если же я пишу что надо переменную can привести к единице, после того как анимировалось две плашки, то появляется глюк при анимировании соседней плашки, а именно: анимация происходит в два, а то и три раза быстрее, цифра которая генерируется для плашки- вообще генирируется не по сценарию (не тогда когда нужно).
Если обновить один или несколько раз страницу с таймером то при достижении нуля соседняя плашка вообще может не анимироваться- почему??- ведь есть сценарий по которому она просто обязана анимироваться, но нет она бывает может анимироваться а может и не анимироваться- вот этого я вообще никак не пойму. Ведь при перезагрузке страницы js-сценарий не меняется. При чем происходит это не сразу а, во-первых: при одном или нескольких обновлений страницы с таймером, во-вторых: первый раз, по достижении нуля, соседняя плашка может анимироваться по сценарию и если подождать еще 10-20 сек. то она не анимируется вообще по достижении нуля, как?? ведь страница не перезагружена, условие же "if" не может взять и пропасть.
Помогите, пожалуйста, кто-нибудь понять в чем я ошибаюсь и что нужно сделать в данной ситуации?
P.S: Если анимации второй плашки не происходит то обновите страницу с таймером.
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
19.03.2018, 13:09
Ответы с готовыми решениями:

jQuery animation и wordpress
очень долго бьюсь над проблемой подключения плагина анимации jQuery на wordpress.. подскажите пожалуйста если кто знает или делал это...

Как повесить css animation на событие hover в jQuery, чтобы анимация проигрывалась до конца
Есть анимация в CSS с помощью animation и ключевых кадров. Анимация срабатывает при наведении на элемент и длится одну секунду. Если курсор...

Dev-c++ ошибка в стандартном примере "Animation Example"
при попытке компиляции только что открытого примера - тут же вылезает ошибка: 32 C:\programs\Makefile.win recipe for target...

1
Эксперт JS
2037 / 1096 / 409
Регистрация: 29.04.2016
Сообщений: 2,625
20.03.2018, 15:44  [ТС]
Разобрался. Вопрос закрыт.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
20.03.2018, 15:44
Помогаю со студенческими работами здесь

Ошибка в jquery
Не могу понять где ошибка, при выборе последнего optiona должен появляться скрытый блок, http://jsfiddle.net/7Z5Uq/1/

Ошибка в JQuery
Здравствуйте. Создать обычную html страницу и на нем подключил jquery скрипт. Слайдер контента. И он работает даже очень вот как только я...

Ошибка jQuery
Возникла вот такая ошибка. script.js:3 Uncaught ReferenceError: jquery is not defined Прогуглила. Нашла, что проблема может быть в...

Непонятная ошибка jQuery
при попытке загрузить страницу получаю: TypeError: jQuery(...).on is not a function at HTMLDocument.&lt;anonymous&gt;...

Ошибка jQuery.parseJSON()
jQuery.ajax({ url: url, type: &quot;POST&quot;, dataType: &quot;html&quot;, data: jQuery(&quot;#&quot;+ajax_form).serialize(), success:...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве
8Observer8 02.02.2026
Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .
Философия технологии
iceja 01.02.2026
На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf
8Observer8 01.02.2026
Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли
8Observer8 30.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm
8Observer8 30.01.2026
Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru