jQuery가 모든 브라우저에서 호출되지 않음

면책 조항 : jQuery를 처음 사용합니다.jQuery가 모든 브라우저에서 호출되지 않음

div 블록에 대해 jQuery에서 fadeOut 효과를 구현하고 다른 두 개의 div 블록에서 fadeIn 효과를 구현하려고합니다.

그러나 이러한 효과는 Chrome 브라우저에서만 작동합니다 (예 : 사파리, FireFox, Opera에서 작동하지 않음). 오히려 나에게 다소 혼란 스럽습니다. 이전 파일을 저장하는 경우에 대비하여 캐시를 지우려고했지만 그 중 아무 것도 수행하지 않은 것 같습니다. (mainsite.js 파일에 저장)

기본 아이디어는 : videoThumbnail_XYZ의 ID와 div 태그를 클릭하면

$("#videoThumbnail_XYZ").click(function() { 
    $("#thumbnailDescription_XYZ").fadeOut(300); 
    $("#videoPlayer_XYZ").delay(300).fadeIn(100); 
    $("#videoHiddenOptions_XYZ").delay(300).fadeIn(100); 
    });

그래서, 페이드 아웃을 시작하고 fadeIn은 다른 div 태그를 호출합니다.

나는이 순서대로 페이지에 내 자바 스크립트 파일을로드하고

는 (그래서 jQuery를 먼저로드) : 당신이 줄 수

<script src="http://code.jquery.com/jquery-1.4.4.js"></script> 
<script async="" type="text/javascript" src="javascripts/mainsite.js"></script>

모든 지침은 대단히 감사합니다!

출처

2011-01-13 iwasrobbed

코드가 문서 준비 처리기에 있습니까? (예 :'$ (document) .read (function() {... code here ...})'? –

HTML과 JS를 게시 할 수 있습니까? – Chandu

JS 오류가 있습니까? – bharath

코드가 실행되기 전에 DOM이 완전히로드되었는지 확인하십시오.

jQuery를 사용할 때 이렇게하는 일반적인 방법은 다음과 같이 코드를 래핑하는 것입니다.

$(function() { 
    $("#videoThumbnail_XYZ").click(function() { 
     $("#thumbnailDescription_XYZ").fadeOut(300); 
     $("#videoPlayer_XYZ").delay(300).fadeIn(100); 
     $("#videoHiddenOptions_XYZ").delay(300).fadeIn(100); 
    }); 
});

이

은 당신의 코드를 실행하기 전에 DOM이로드되었는지 확인 하십 .ready() 처리기에 코드를 포장에 대한 바로 가기입니다.

DOM을로드 할 수있는 방법을 사용하지 않으면 #videoThumbnail_XYZ 요소를 선택하려고 할 때 해당 요소가 없을 수 있습니다.

다른 접근 방식은 콘텐츠 뒤에 자바 스크립트 코드를 삽입하는 것이지만 내면 닫기 </body> 태그입니다.

<!DOCTYPE html> 
<html> 
    <head><title>your title</title></head> 
    <body> 
     <!-- your other content --> 

     <script src="http://code.jquery.com/jquery-1.4.4.js"></script> 
     <script async="" type="text/javascript" src="javascripts/mainsite.js"></script> 
    </body> 
</html>

출처

2011-01-13 17:32:12 user113716

당신과 Wzzy가 같은 것을 보았습니다 + 1 단축하기위한 1 doc.ready – Loktar

@Loktar : 그들 중 하나가 더 빠름;) –

doc.ready가 너무 길었습니까? 나에게 그것은 가독성을 높이는 것인데, 특히 jQuery 경험이 적은 다른 사람들이 코드를 보게되면 더욱 그렇다. –

JavaScript가 페이지 렌더링시 코드 실행에로드 이벤트를 제공하지만 이미지와 같은 모든 애셋이 완전히 수신 될 때까지이 이벤트가 트리거되지 않습니다. 대부분의 경우, DOM 계층 구조가 완전히 구성되는 즉시 스크립트를 실행할 수 있습니다. .ready()에 전달 된 핸들러는 DOM 준비가 완료되고이 실행 된 후에 실행되도록 보장되므로 일반적으로 다른 모든 이벤트 핸들러를 연결하고 다른 jQuery 코드를 실행하는 가장 좋은 장소입니다. 다음 구문 중 세

$(document).ready(function(){ 
    $("#videoThumbnail_XYZ").click(function() { 
     $("#thumbnailDescription_XYZ").fadeOut(300); 
     $("#videoPlayer_XYZ").delay(300).fadeIn(100); 
     $("#videoHiddenOptions_XYZ").delay(300).fadeIn(100); 
    }); 
});

은 동일

* $(document).ready(handler) 
* $().ready(handler) (this is not recommended) 
* $(handler)

출처

2011-01-13 17:32:44 Wazzzy

mainsite.js 만약이 귀하의 div가 렌더링되기 전에, 즉 루프의 브라우저를 던지는 수 있습니다 포함되고있다. 당신의 click 처리기 설치 주변이 포장보십시오 :

$(document).ready(function(){ 
// your function here 
});

즉, DOM이 준비하기 전에 실행하지 있는지 확인합니다.

또한 fadeIn 호출을 fadeOut의 콜백 함수에 넣는 것을 고려할 수 있습니다. 나중에 기간을 변경하기로 결정하면 한 곳에서 변경하면됩니다.

모습을하려는 방법은 다음과 같이이다 : 나는 당신이 당신의 페이드 아웃은 같은 기간으로 설정 지연을 참조

$("#thumbnailDescription_XYZ").fadeOut(300,function(){ 
    $("#videoPlayer_XYZ").fadeIn(100); 
    $("#videoHiddenOptions_XYZ").fadeIn(100); 
});

출처

2011-01-13 17:33:10

Kyle, 콜백 함수에 대한 좋은 지적은 똑같은 효과가 있기 때문입니다. – iwasrobbed

, 나는 애니메이션의 어떤 본질에 대기하는 대신 지연의 추천 대신 콜백 함수를 사용하십시오.

$("#videoThumbnail_XYZ").click(function() { 
    $("#thumbnailDescription_XYZ").fadeOut(300, function() { 
     $("#videoPlayer_XYZ").fadeIn(100); 
     $("#videoHiddenOptions_XYZ").fadeIn(100); 
    }); 
});

출처

2011-01-13 17:39:37

jQuery가 모든 브라우저에서 호출되지 않음

답변

관련 문제