JQuery .animate（）僅適用於Chrome

Question

我正在使用JQuery .animate（）函數在容器div中滑動div。這在谷歌瀏覽器中沒有問題，但當我在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; 
} 

中的JavaScript

$(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')); 

    ...