jQuery를 높이 변화가 사파리

에서 작동하지 않는 나는 사파리 단지 파이어 폭스에서 잘하지만 노력하고 다음 사이트에 JS 기능이 : http://rossbolger.com/kids/light-stories/jQuery를 높이 변화가 사파리

이 기능은 # 이미지 - 엄지 손가락라는 작은 이미지의 그리드를 슬라이드# hit-area이라는 컨테이너 위로 마우스를 가져 가면 처음에는 #image_thumbs 높이를 '48px'에서 'auto'로 변경하여 Firefox에서 작동합니다. 높이는 jQuery의 height()를 사용하여 측정됩니다. 이 높이는 변수에 저장되고 jQuery의 css()를 사용하면 마우스가 끝나면 # image-thumbs로 되돌아갑니다. 사이트에

코드는 다음과 같은 작은 선물 같습니다

// Thumbnails Nav Reveal and Hide Scripts 
var thumbs_height = 1, 
thumbs = $('#image-thumbs'), 
thumbs_original_height = thumbs.css('height'); 

// Slide Up Thumbs 
(function revealThumbs() { 

    // On hover let the thumbs become their full height 
    $('#image-thumbs #hit-area').hover(function(){ // Mouse over 
     // Get the unrestricted height of the thumbs 
     thumbs.css('height', 'auto'); 
     thumbs_height = thumbs.height(); 

     // then put it back to what it was so we can animate it using CSS3 transition 
     thumbs.css('height', 'inherit'); 

     // delay 0.1s before triggering the change in height (time for the calculations to complete) 
     setTimeout(function() { thumbs.css('height', thumbs_height) }, 100); 

    }, function(){ // Mouse out 
     hideThumbs(); 
    }); 
})(); 

// Hide thumbs 
function hideThumbs(){ 
    thumbs.css('height', thumbs_original_height); 
};

무제한 높이를 측정하고 픽셀 값으로 다시 전달보다는 단순히 '자동'으로 높이를 설정하는 이유는, CSS3를 통해 슬라이딩 효과를 만드는 것입니다 (즉, 전환 : 높이 0.5 초). 영향을받은 속성이 하나의 숫자 값에서 다른 값으로 이동하는 경우에만 변환이 수행됩니다.

버그를 테스트하는 데 도움을 주셔서 감사합니다. 아직 다른 브라우저를 보지 못했습니다.

모든 최선을, 로렌스

출처

2013-08-09 Laurence Lord

변수의 범위와 관련이있을 수 있습니까? Safari의 콘솔이 hideThumbs()의 '엄지 손가락'을 정의되지 않은 것으로 간주한다는 것을 알게되었습니다. –

좋아, 나는 그것을 밖으로 일했다 ... 자바 스크립트 문서에서

(사이트에 scripts.js)는 페이지 업 기능 높은 있었다 hideThumbs() 함수를 호출합니다. hideThumbs()의 변수가 그 시점에서 선언되지 않았기 때문에 작동하지 않습니다. 재밌어 그것은 여전히 파이어 폭스와 IE9에서 작동해야합니다!

다른 모든 기능을 사용하기 전에이 코드를 모두 한 지점으로 옮기고 문제가 해결되었습니다. 지금까지이 작업은 로컬에서만 수행했습니다. 나중에 링크에서 사이트를 업데이트하겠습니다.

출처

2013-08-12 11:29:50

jQuery를 높이 변화가 사파리

답변

관련 문제