2013-03-07 2 views
1

배경 이미지를 변경하기 위해 일정 간격으로 사전로드 된 이미지 배열 사이를 회전하는 스크립트가 있습니다. 회전 교차 페이드를 만들기 위해 전환 (transition: background-image 2s ease)을 사용하고 있지만 현재 Chrome에서만 지원됩니다.배경 이미지 전환을위한 jQuery 폴백

jQuery를 사용하여 스크립트를 수정하여 요소를 애니메이션으로 페이드 아웃하고 소스를 변경 한 다음 페이드 인 할 수 있지만이 스크립트를 사용하면 Chrome의 동작이 무시됩니다. 측면/대체 질문으로 jQuery를 사용하여 크로스 페이딩을 에뮬레이트 할 수 있습니까?

Chrome에서 CSS 전환을 사용하고 다른 모든 브라우저에서 jQuery 애니메이션을 사용하도록 허용하려면 어떻게해야합니까?

나는 모더 나이저를 사용하고 있지만 대부분의 다른 최신 브라우저들이 background-image처럼 어떤 특정 전환을 지원하지 않는 경우에도 csstransitions 클래스를 얻을로 특징 검출이 작동 것이라고 생각하지 않지만, 사람이 할 수 있다면 행복 할 것 내가 틀렸다는 것을 증명 해봐.

+0

는 U 클라이언트가 크롬 브라우저 광고가 조건 코드를 넣을 경우 찾을 네비게이터 객체를 사용할 수있는이 도움이됩니다. – ravisoni

답변

1

U 탐색기 개체를 사용하여 클라이언트가 크롬 브라우저 광고 코드를 조건에 부합하는지 확인할 수 있습니다.

$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase()); 
if($.browser.chrome){ 
/*code for chrome browser*/ 

} 
else{ 
/*code for other browser*/ 
} 

희망

+0

나는이 접근법을 좋아한다. 첫 번째 줄은 정규식을 사용합니다.이 경우 구문에 대해 궁금해 할 수 있습니다. https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Regular_Expressions –

+0

이것이 얼마나 우아한 지 모르겠지만 프레임 워크로 코드를 사용하고 대신 PHP 체크를 하단에 추가했습니다. 이 질문에 설명 된대로 내 index.php 파일 : http://stackoverflow.com/questions/3047894/how-to-detect-google-chrome-as-the-user-agent-using-php 다음 함수 내에서 전역 변수 (isChrome)를 확인하고 그에 따라 적절한 코드를 수행하십시오. – Bobe

+0

@Bob 위대한 보브는 ypur 좋은 일을 계속 지킵니다 :-) – ravisoni