JQuery가 IE8에서 작동하지 않습니다.

Question

먼저 부드럽게하십시오. 당신은 지금까지 본 가장 추악한 jquery의 일부에 노출 될 것입니다.

이것은 플러그인을 사용하여 Javascript/JQuery 과거에 처음 입성 한 것이므로 가파른 학습 곡선이었습니다.

jquery를 사용하여 몇 개의 div를 애니메이션 및 페이드 아웃하는 오프닝 애니메이션 (클라이언트의 주장에 따라)을 만들었습니다.

이 스크립트는 크롬, 파이어 폭스, 사파리에서 잘 작동하지만 IE8에서는 작동하지 않습니다 ... div는 매우 느리게 걸립니다.

는 여기에 내가 기쁨으로, 지금까지 나의 연구에 무슨 짓을했는지의 : $ (문서)에 싸여

1. 최신 JQuery와 (1.5)
2. 스크립트 .ready (함수() {.. .
3. 유형 = 텍스트/자바 스크립트 또한

, 나는 또한 IE8에서 잘 작동 다른 자바 스크립트 (슬라이드 쇼 및 미디어 플레이어)를 사용하고 있습니다.

이 스크립트를 IE에서 작동시키는 방법에 대한 아이디어는 많이 알려 드리겠습니다.

또한이 해킹 코드를 정리할 때 제안 사항이 있으시면 언제든지 말씀해주십시오. 내가 말하는 것처럼, 추한 것입니다. 코드 상에,

: 문서의 헤드에있는

스크립트,

<script type="text/javascript"> 

$(document).ready(function(){ 


$('#intro_finger_print') 
    .fadeOut(6500, function() { 
      }); 

    $('#intro_black_bar').animate({ 
    width: '+=1000', 
    }, 1000, function() { 
    // Animation complete. 
    }); 

    $('#intro_black_bar').animate({ 
    width: '+=0', 
    }, 1000, function() { 
    // Animation complete. 
    }); 

    $('#intro_black_bar').animate({ 
    marginTop: '-=83', 
    }, 1000, function() { 
    // Animation complete. 
    }); 


$('#intro_unique_fitouts').animate({ 
    marginLeft: '-=1773', 
    }, 1000, function() { 
    // Animation complete. 
    }); 

$('#intro_unique_fitouts').animate({ 
    width: '+=0', 
    }, 1000, function() { 
    // Animation complete. 
    }); 

    $('#intro_unique_fitouts').animate({ 
    marginTop: '-=83', 
    }, 1000, function() { 
    // Animation complete. 
    }); 

    $('#intro_unique_fitouts').animate({ 
    marginLeft: '=0', 
    }, 2000, function() { 
    // Animation complete. 
    }); 

    $('#intro_unique_fitouts').animate({ 
    marginLeft: '-=683', 
    }, 1000, function() { 
    // Animation complete. 
    }); 

    $('#intro_black_bar').animate({ 
    marginLeft: '+=0', 
    }, 2000, function() { 
    // Animation complete. 
    }); 

    $('#intro_black_bar').animate({ 
    marginLeft: '+=1683', 
    }, 1000, function() { 
    // Animation complete. 
    }); 


    $('#intro_container') 
    .animate({ 
    opacity: 1, 
    }, 6500, function() { 
    // Animation complete. 
    }); 

    $('#intro_container') 
    .animate({ 
    opacity: 0, 
    }, 1000, function() { 
    // Animation complete. 
    }); 

    }); 

    </script> 

HTML :

<!-- animation --> 

<div id="intro_container">&nbsp; 
<div id="intro_white_div">&nbsp; 
<div id="intro_finger_print">&nbsp;</div> 
<div id="intro_black_bar">&nbsp;</div> 
<div id="intro_unique_fitouts">&nbsp;</div> 
</div> 
</div><!-- end container --> 

<!-- end animation --> 

CSS : 사전에

/* ANIMATION */ 

#intro_container {background-color:white; min-width:100%; min-height:100%; display:block; padding:0; margin:0 auto; position:fixed; left:0%; top:0%; z-index:1000;} 

#intro_white_div {width:100%; background-color:white; margin:-20px 0 auto; display:block; min-height:900px; position:absolute; left:0%; margin-left:0px; overflow:hidden; background-image:url(../images/container_bg.jpg); background-repeat:repeat-x; margin-top:-15px;} 

#intro_black_bar {width:0px; height:55px; display:block; background-color:none; background-image:url(../images/intro_black_strip.png); background-repeat:no-repeat; position:absolute; top:150px; left:50%; margin-left:-495px; z-index:1200;} 

#intro_unique_fitouts {width:500px; float:right; background-image:url(../images/Unique_Fitouts_intro.png); background-repeat:no-repeat; z-index:1500; height:50px; background-color:none; margin-top:138px; margin-left:2097px; position:absolute;} 

#intro_finger_print {height:580px; position:absolute; width:960px; left:50%; margin-left:-480px; background-image:url(../images/ThumbA4Black.png);background-position:bottom left; background-repeat:no-repeat;} 

감사합니다,

CB

Answer 1

아마 쉼표가 목록에있을 것입니다. 지금 당장은 확인할 수 없지만 내 베팅은 그렇습니다. $('#intro_unique_fitouts').animate({ marginLeft: '-=1773', }, 1000, function() { // Animation complete. });

사용이 $('#intro_unique_fitouts').animate({ marginLeft: '-=1773' }, 1000, function() { // Animation complete. });

참고 애니메이션 목록에서 누락 된 쉼표 대신의

. 여분의 후행 쉼표로 인해 문제가 발생합니다.

Answer 2

IE에서 오류가 발생합니까?

개체의 마지막 속성에 쉼표를 붙이면 IE가 중단됩니다. 일반적인 문제입니다.

$('#intro_black_bar').animate({ 
     // marginLeft is the only property and is therefore the last one as well. 
     // Remove the comma after the last property 
     marginLeft: '+=1683', 
    }, 1000, function() { 

    }); 

다른 브라우저는 정상적으로 작동하지만 일반적으로 개체에 후행 쉼표를 사용하지 마십시오. 들어갈 좋은 습관.