Нежелательное перемещение изображений после вызова jquery

Question

Существует проект, над которым я работаю, это простое анимированное jQuery устройство.

Но если я вызову одно событие javascript после анимации изображений, по какой-то причине оно изменит свои позиции. Я исследовал эту проблему в течение некоторого времени, попробовал написание jquery по-другому, и это не помогло. Есть ли причина такого поведения?

Это тестовая страница в вопросе (Извинения для числовой области):

http://62.133.128.32:8080/osiedle/index2.html 

Это работает, если удалить интервал на это:

function updateTime() { 
    var now = new Date().format("dd.MM.yyyy, hh:mm"); 
    $('.timeStr').html(now); 
} 

который устанавливается, как это на странице нагрузка:

setInterval(updateTime, 1000); 

Если это прокомментировано, после нажатия маленькой иконки прямоугольника внизу устройство будет выскочить и вести себя правильно. Но если событие срабатывает во время/после этой анимации - изображения будут сломаны. Возможно, это проблема CSS, а не сама JS? Это мой CSS установлен на вершине самозагрузки один:

<style type="text/css"> 
    body { 
     background-image:url('img/bg.png'); 
     background-repeat:no-repeat; 
     background-position:right top; 
     background-size: cover; 
     padding:0; margin:0; 

    } 
    .device { 
     position:absolute; 
     top:10%; 
     left:20%; 
     right:20%; 
     display: block; 
     margin-left: auto; 
     margin-right: auto; 
     z-index: 998; 
    } 
    .home { 
     position: absolute; 
     top:60%; 
     left:20%; 
     right:20%; 
     display: block; 
     margin-left: auto; 
     margin-right: auto; 
     z-index: 999; 
    } 
    .time { 
     position: absolute; 
     top: 55px; 

     left: 46.5%; 

     z-index: 999; 
    } 
    .timeStr { 
     color: #fff; 
    } 
    .tablet { 
     position: fixed; 
     top: 85%; 
    } 
    .upleft { position:relative; left:-160px; top:-160px; } 
    .upright { position:relative; left:160px; top:-160px; } 
    .downleft { position:relative; left:-160px; top:160px; } 
    .downright { position:relative; left:160px; top:160px; } 
    a { outline:none; height: 10px; } 
    p { padding:0; margin:0; } 
    img { border:0; 
      vertical-align: baseline;} 
    #tab-scrollcontainer { height:461px; width:620px; position:absolute; top:140px; left: 520px; overflow:hidden; z-index:999;} 
    .tab-row { clear:both; } 
    .icon { float:left; margin:9px 11px; } 
    .ico_txt { text-align:center; font-family:Georgia, Times, serif; font-size:10px; color:#d4d4d5; } 
    #sb-items { width:100%; height:368px; display:none; } 
</style> 

Answer 1

Ваш комментарий, может быть, что это не имеет никакого отношения, но я заметил, что ваши значки не всегда устраивают себя правильно (с удвоением пространство между строками).

Я изначально думал (возможно, неправильно), что это была проблема, которую вы надеялись решить.

Вот скриншот:

Игнорирование выравнивание по левому краю самой панели, причина вы получаете большие промежутки между вашими «строк» ​​является CSS клиринг ошибка, которую вы можете решить с помощью изменяя четкое свойство в CSS для .tab-row:

.tab-row { 
    clear: left; 
} 

Answer 2

Это может быть что-то простое, как изменение функции с именем updateTime к чему-то еще.

function updateTimeForPage() { 
    var now = new Date().format("dd.MM.yyyy, hh:mm"); 
    $('.timeStr').html(now); 
} 

И

setInterval(updateTimeForPage, 1000);