jquery 호출 후 원치 않는 이미지 재배치

Question

내가 작업하고있는 프로젝트가 있는데, jquery-animated 간단한 장치입니다.

그러나 이미지 애니메이션이 완료된 후에 하나의 자바 스크립트 이벤트를 호출하면 어떤 이유로 든 위치가 변경됩니다. 나는이 문제를 얼마 동안 조사했고, 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); 

하단에있는 작은 사각형 아이콘을 클릭 한 후 주석 처리하면 밖으로 밀려 나오고 올바르게 작동합니다. 그러나이 애니메이션 중/후에 애니메이션이 실행되면 이미지가 손상됩니다. JS 자체가 아닌 CSS 문제 일 수 있습니까? 이는 내 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 청산 버그입니다 .tab-row의 CSS에서 맑은 속성을 변경 :

.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);