2010-08-02 10 views
4

어떤 이유로 Firefox에서 애니메이션 방법이 작동하지 않습니다. show()와 같은 기본 함수조차 작동하지 않습니다. 그들은 IE 8에서 완벽하게 정상적으로 작동하는 것 같습니다. 다른 사람이이 문제를 접하게 되었습니까? 아니면 왜 이런 일이 발생했는지 설명 할 수 있습니까?jQuery 애니메이션이 Firefox에서 작동하지 않습니다.

편집 : 예제 코드 - jQuery를이 다음을 표시 할 수 있도록 .form_error 세트의

$(document).ready(function() { 
    $(".form_error").show(); 
}); 

CSS를 없음으로 표시됩니다.

IF 문에서 이것을 랩핑하고 콘솔 로그를 Firebug에 기록하는 방법을 시도해 보았습니다.

$(document).ready(function() { 
    if($(".form_error").show()) { 
    console.log('Complete') 
    } 
}); 

이렇게하면 방화 광 로그에 로그 메시지가 표시됩니다. 나는 파이어 폭스 예를 들어, CSS() 등) (찾을에서 잘 작동 다른 jQuery를 방법이

편집 :

여기

(오류 필드) 테이블에 대한 HTML

<table class="login"> 

     <thead> 
     </thead> 
     <tfoot> 
      <tr><td><input type="submit" value="Sign In" /></td></tr> 

      <tr><td class="auth_small_problems"><a href="forget">Forgotten details?</a></td></tr> 
     </tfoot> 

     <tbody> 
      <tr><th scope="col"><label for="username">Username</label><br /><div class="form_error">This field is required.</div></th></tr> 
      <tr><td><input type="text" id="username" name="username" value=""/></td></tr> 
      <tr><th scope="col"><label for="password">Password</label><br /><div class="form_error">This field is required.</div></th></tr> 

      <tr><td><input type="password" id="password" name="password" /></td></tr> 
     </tbody> 
     </table> 

여기입니다 관련 CSS :

.form_error { 
    -moz-box-shadow: 4px 4px 4px #3c3c3c; 
    -webkit-box-shadow: 4px 4px 4px #3c3c3c; 
    -opera-box-shadow: 4px 4px 4px #3c3c3c; 
    box-shadow: 4px 4px 4px #3c3c3c; 
    -moz-border-radius:12px 12px 12px 12px; 
    -webkit-border-radius:12px 12px 12px 12px; 
    -opera-border-radius:12px 12px 12px 12px; 
    border-radius:12px 12px 12px 12px; 
    background:none repeat scroll 0 0 #c21312; 
    color:#f7f7f7; 
    font-style:italic; 
    font-weight:bold; 
    left:300%; 
    opacity: 0.8; 
    padding:12px; 
    position:relative; 
    text-align:center; 
    text-shadow:none; 
    top:0px; 
    width: auto; 
    display: none; 
} 
th, td 
{ 
border-width:5px; 
padding:10px 15px; 
text-align:left; 
text-shadow:1px 1px 1px #234C76; 
} 
#auth table.login { 
margin:18px auto; 
width:336px; 
} 

#auth table { 
-moz-border-radius:10px 10px 10px 10px; 
background:none repeat scroll 0 0 #69C212; 
border:2px solid #234C76; 
margin-top:18px; 
width:960px; 
} 

table { 
border-collapse:separate; 
border-spacing:4px; 
font-size:1.8em; 
margin:0 auto; 
padding:18px 5px 5px; 
} 

나는 이것이 누군가 무슨 일이 일어나는지 알아내는 데 도움이되기를 바랍니다 !!

UPDATE : 지금 작동하는 것 같군

- 가끔! 나는 그것이 다른 어떤 곳에서가 아니라 때때로 작동하는 것처럼 보이는 이유를 정확히 지적 할 수 없다. 개발자 도구 모음에서 캐시를 사용 중지했으며 ctl-f5를 사용하여 새로 고치기 때문에 캐싱과 관련이 없다고 생각합니다.

+1

작동하지 않는 샘플 코드를 게시 할 수 있습니까? –

+0

정확하게 작동하지 않는 것에 대한 자세한 내용을 제공해야합니다. http://api.jquery.com/animate/에있는 예제는 파이어 폭스에서 완벽하게 작동합니다. – draganstankovic

+0

원래 게시물로 수정을 참조하십시오. – musoNic80

답변

0

일반적으로 jquery는 firefox에서 작동합니다. firebug는 어떤 스크립트 오류가 있는지 또는 누락 된 파일이 있는지 알려줍니다.

+0

방화 광에서 오류나 누락 된 파일이 없습니다. – musoNic80

+0

의견을 질문으로 추가하고 답변을 답변으로 저장하십시오. – JasCav

0

FF 또는 Firebug에서 JS 오류가 발생하지 않는다면 HTML/CSS에 문제가있을 수 있습니다.

UPDATE : 당신은 당신의 CSS에서 이것을 가지고

:

왼쪽 : 300 %;

그 원인 일 수 있습니까?

+0

내 HTML/CSS에 문제가있는 경우 왜 ie8에서 제대로 작동합니까? – musoNic80

+0

@ musoNic80 - 아무 브라우저도 다른 브라우저와 같지 않으므로. – JasCav

+0

IE는 종종 잘못되었습니다. 제거를 시도 했습니까? 문제를 좁힐 수있는 유일한 방법은 제안을 시도하고 효과가 있는지 여부를 알려주는 것입니다. –

0

기간을 제공 했습니까?

$(".form_error").show('slow') 
+0

텍스트 버전과 숫자 버전을 함께 사용하거나 사용하지 않으려 고 시도했습니다. – musoNic80

+0

약간의 변경으로 파이어 폭스에서 제공 한 코드를 시도했습니다. '느린'param을 추가했으며 document.ready로 시작하는 대신 애니메이션을 시작하는 'click me'버튼을 넣었습니다. 시각. – draganstankovic

0

어떤 방식 으로든 방해 할 수있는 다른 모든 CSS를 제거하는 것 외에도 모든 브라우저 부가 기능을 해제하십시오. 일종의 광고 차단기 등으로 실수로 애니메이션을 차단했을 수 있습니다. 웹 개발자 확장 기능을 갖고 있지 않다면 추가하십시오. CSS를 사용하거나 사용하지 않도록 설정하고 문제를 추적 할 수 있습니다.

관련 문제