예기치 않은 결과를주는 jQuery의 애니메이션.

jQuery를 사용하여 Flash 애니메이션의 효과를 복제하는 클라이언트 사이트를 Flash에서 HTML로 전송합니다. 이 특별한 것은 .animate를 사용하여 CSS의 "top"값을 변경합니다. 영향을받는 모든 요소의 CSS 위치는 절대 또는 상대로 설정됩니다. 난 그냥 주소 표시 줄을 선택하고 Enter 키를 누르 그러나 경우, (삭제 사이트 주소 편집)예기치 않은 결과를주는 jQuery의 애니메이션.

애니메이션 내가 새로 고침을 누를 때마다 작동

function maskUp(height, length) { 
    var contentMask = $('#left-content .content-mask'); 

    contentMask.animate({top: 312}, 500, function(){ 
     contentMask.delay(100).animate({top: height}, length, function(){ 
      contentMask.children('.active').removeClass('hide'); 
     }); 
    }); 
}

여기 상단 변화하는 코드입니다 애니메이션이 완료되면 요소는 예상했던 것과 완전히 다른 위치로 이동합니다. Chrome의 개발자 도구는 올바른 위치에 있지만 "최상위"값이 정확하다는 것을 보여 주며 Chrome의 개발자 도구에서 값을 변경해도 위치가 전혀 변경되지 않아 어떻게 든 부러 뜨린 것으로 생각하게 만듭니다. .

미리 감사드립니다.

출처

2011-08-23 Gotcat

그래요. 문제는 무엇입니까 (내가 말할 수있는 한) 뷰포트가 a-sorry-state div 위치로 계속 이동한다는 것입니다. id을 페이지의 location.hash으로 전달하면 id 인 해당 요소로 스크롤됩니다. 따라서 URL의 해시 부분 대신 쿼리 매개 변수를 사용한다고 말합니다. tabs.js의 코드를 보면 당신이

/*might want to change the name too*/ 
function getHash() { 
    return location.search.slice(1); // .search will return the part of the url 
            // that follows the ? symbol. string.slice(1) 
            // returns all but the first character of 
            // the string (the ?). 
}

에 다음과 같은 기능

function getHash(url) { 
    var hashPos = url.lastIndexOf ('#'); 
    return url.substring(hashPos + 1); 
}

을 변경 한 다음이가 일어나고있다

http://panaceaentertainment.com/wp/television?a-sorry-state

출처

2011-08-23 17:45:52

아, 뛰어 오르는 뷰포트가 설명해줍니다. 이것은 합리적인 솔루션처럼 들리지만 검색 쿼리 대신 해시를 사용하는 이유는 사용자가 링크를 클릭 할 때 페이지가 다시로드되지 않도록하기 위해서입니다. ID가 해시와 동일하지 않도록 해시 태그를 변경하려고합니다. – Gotcat

@ Gotcat 제가 아는 한, 검색 매개 변수는 전체 재로드를 유발하지 않습니다. –

잘 알고있어, 조셉 감사합니다! 귀하의 회신을 읽기 전에 해시 태그를 바 꾸었습니다. 문제가 해결되었습니다 (뷰포트 점핑이 문제였습니다). 다시 한 번 감사드립니다! – Gotcat

죄송합니다. 귀하를위한 진정한 답변이 없으므로 조사 할 항목이 있습니다.

라이트 박스와 관련이 있습니까? 주소창에 Enter를 누르거나 다시로드 할 때 id = "라이트 박스"에 대해 최고 스타일이 다르다는 것을 알 수 있습니다.

라이트 박스 코드를 제거하면 어떻게됩니까?

출처

2011-08-23 17:44:58 wightnoise

같은 URL을 사용할 수 말할 것 Lightbox 코드를 추가하기 전부터 사이트를 삭제 한 후 문제가 남아 있습니다. – Gotcat

예기치 않은 결과를주는 jQuery의 애니메이션.

답변

관련 문제