JQuery .animate()는 Chrome에서만 작동합니다.

Question

JQuery .animate() 함수를 사용하여 컨테이너 div에서 div를 슬라이드합니다. 이것은 Chrome에서 문제없이 작동하지만 Firefox 나 IE에서 시도 할 때 div가 엉망으로 엉망이되어 실제 슬라이드하지 않습니다. 나는 JavaScript에 익숙하지 않고 브라우저 호환성의 방식을 모르는 사람이 누구든지 올바른 방향으로 나를 가리킬 수 있습니까?

html로

<div id="slider"> 
    <div id="main" class="content"> 
    </div> 

    <div id="projects" class="content"> 
    </div> 

    <div id="about" class="content"> 
    </div> 

    <div id="contact" class="content"> 
    </div> 
</div> 

CSS의

#slider { 
    width: 100px; 
    height: 100px; 
    overflow: hidden; 
    position: relative; 
} 

#main { 
    background-color: red; 
    width: inherit; 
    height: inherit; 
    position: absolute; 
} 

#projects { 
    background-color: blue; 
    width: inherit; 
    height: inherit; 
    position: absolute; 
} 

#about { 
    background-color: yellow; 
    width: inherit; 
    height: inherit; 
    position: absolute; 
} 

#contact { 
    background-color: green; 
    width: inherit; 
    height: inherit; 
    position: absolute; 
} 

.content { 
    left: 0; 
    top: 0; 
} 

자바 스크립트

$(document).ready(function() { 

var contentWidth = '100px'; 

for(var i=0; i < 2; i++) { 
    $('.gallery' + (i + 1)).colorbox({ opacity:0.5 , rel:'gallery' + (i+1)}); 
} 

$('.content').css({ 
    position: 'absolute', 
    left: contentWidth 
}); 

$('#main').addClass('visible'); 
document.getElementById('main').style.left = "0"; 

$("li a").click(function() { 
    event.preventDefault(); 
    var $blockID = $($(this).attr('href')); 

    if ($blockID.hasClass('visible')) { return; } 

    $('.content.visible') 
    .removeClass('visible') 
    .animate({ left: '-=100px' }, { 
     duration: 'slow', 
     complete: function() { 
     $(this).css('left', '100px'); 
     } 
    } 
); 

$blockID 
    .addClass('visible') 
    .animate({ left: 0 }, {duration: 'slow'}); 
}); 

}); 

JSFiddle : http://jsfiddle.net/bwvVZ/

나는 또한 할 수 여기에 관련 코드입니다 문제의 사이트에 대한 링크를 제공하십시오. 규칙에 어긋나는 지 확실하지 않기 때문에 연기하겠습니다. 어떤 도움을 많이 주시면 감사하겠습니다!

Answer 1

당신은 당신의 클릭 핸들러

$("li a").click(function(){ 
    event.preventDefault(); 
    //... 
}); 

에서 event 인수를 누락이

$("li a").click(function (event){ 
    event.preventDefault(); 
    //... 
}); 

DEMO해야한다.

Answer 2

IE에서 직접 테스트 할 수는 없지만 Firefox를 수정하면 returnValue가 IE를 수정해야합니다. CSSDeck Test - 내 현재 위치에서 jsfiddle에 액세스 할 수 없습니다.

$("li a").click(function (event){ 
    event.returnValue = false; //ie 
    if(event.preventDefault) //prevents error if not found 
     event.preventDefault(); 

    var $blockID = $($(this).attr('href')); 

    ...