JQuery不在火狐浏览器中运行，在Safari浏览器中运行

Question

我正在为某些基本动画构建使用Jquery的网站。 javascript在这里：

$(document).ready(initialize); 
var currentSelection = null; 
var previousSelection = null; 
function initialize() 
{ 

$("#print").bind("mouseover", navHover); 
$("#print").bind("mouseout", navStby); 
$("#print").bind("click", selectPrint); 

$("#radio").bind("mouseover", navHover); 
$("#radio").bind("mouseout", navStby); 
$("#radio").bind("click", selectRadio); 

$("#tv").bind("mouseover", navHover); 
$("#tv").bind("mouseout", navStby); 
$("#tv").bind("click", selectTV); 

$("#comedy").bind("mouseover", navHover); 
$("#comedy").bind("mouseout", navStby); 
$("#comedy").bind("click", selectComedy); 

$("#about").bind("mouseover", navHover); 
$("#about").bind("mouseout", navStby); 
$("#about").bind("click", selectAbout); 
} 

function navHover(){ 
    $(this).css({"background-position":"0px 124px"}); 
} 

function navStby(){ 
    $(this).css({"background-position":"0px 0px"}); 
} 

function selectPrint() 
{ 
    if(currentSelection==null) 
    { 
     $("#print").animate({"margin-left":"-40px"}, 500, loadPrint); 
} 
else if(currentSelection!=null) 
{ 
    $("#titleContainer").animate({"margin-left":"-450"}, 1000, loadPrint); 
    currentSelection.animate({"margin-left":"0px"}, 500); 
    $("#print").animate({"margin-left":"-40px"}, 500); 
} 

} 

function loadPrint() 
{ 
    currentSelection = $("#print"); 
    $("#titleContainer").css({"background":"url('img/printTitle.png')",   "background-repeat":"no-repeat"}); 
    $("#titleContainer").animate({"margin-left":"0px"}, 1000); 
} 



function selectRadio() 
{ 
    if(currentSelection==null) 
    { 
     $("#radio").animate({"margin-left":"-40px"}, 500, loadRadio); 
    } 
    else if(currentSelection!=null) 
    { 
      $("#titleContainer").animate({"margin-left":"-450"}, 1000, loadRadio); 
     currentSelection.animate({"margin-left":"0px"}, 500); 
     $("#radio").animate({"margin-left":"-40px"}, 500); 
    } 

} 

function loadRadio() 
{ 
    currentSelection = $("#radio"); 
    $("#titleContainer").css({"background":"url('img/radioTitle.png')", "background-repeat":"no-repeat"}); 
    $("#titleContainer").animate({"margin-left":"0px"}, 1000); 
} 



function selectTV() 
{ 
    if(currentSelection==null) 
    { 
     $("#tv").animate({"margin-left":"-40px"}, 500, loadTV); 
    } 
    else if(currentSelection!=null) 
    { 
     $("#titleContainer").animate({"margin-left":"-450"}, 1000, loadTV); 
     currentSelection.animate({"margin-left":"0px"}, 500); 
     $("#tv").animate({"margin-left":"-40px"}, 500); 
    } 

} 

function loadTV() 
{ 
    currentSelection = $("#tv"); 
    $("#titleContainer").css({"background":"url('img/tvTitle.png')", "background-repeat":"no-repeat"}); 
    $("#titleContainer").animate({"margin-left":"0px"}, 1000); 
} 


function selectComedy() 
{ 
    if(currentSelection==null) 
    { 
     $("#comedy").animate({"margin-left":"-40px"}, 500, loadComedy); 
    } 
    else if(currentSelection!=null) 
    { 
     $("#titleContainer").animate({"margin-left":"-450"}, 1000, loadComedy); 
     currentSelection.animate({"margin-left":"0px"}, 500); 
     $("#comedy").animate({"margin-left":"-40px"}, 500); 
    } 

} 

function loadComedy() 
{ 
    currentSelection = $("#comedy"); 
    $("#titleContainer").css({"background":"url('img/comedyTitle.png')", "background-repeat":"no-repeat"}); 
    $("#titleContainer").animate({"margin-left":"0px"}, 1000); 
} 

function selectAbout() 
{ 
    if(currentSelection==null) 
    { 
     $("#about").animate({"margin-left":"-40px"}, 500, loadAbout); 
    } 
    else if(currentSelection!=null) 
    { 
     $("#titleContainer").animate({"margin-left":"-450"}, 1000, loadAbout); 
     currentSelection.animate({"margin-left":"0px"}, 500); 
     $("#about").animate({"margin-left":"-40px"}, 500); 
    } 

} 

function loadAbout() 
{ 
    currentSelection = $("#about"); 
    $("#titleContainer").css({"background":"url('img/aboutTitle.png')", "background-repeat":"no-repeat"}); 
    $("#titleContainer").animate({"margin-left":"0px"}, 1000); 
} 

我知道这很多。下面是HTML太：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<script type="text/javascript" src="jquery-1.3.2.js"></script> 
<script type="text/javascript" src="javascript.js"></script> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title></title> 
<link rel="stylesheet" href="style.css" type="text/css" /> 
</head> 
<body> 
<div id="logo"> 
</div> 
<div id="titleStrip"> 
    <div id="titleContainer"> 
    </div> 
</div> 
<div id="print"> 
</div> 
<div id="radio"> 
</div> 
<div id="tv"> 
</div> 
<div id="comedy"> 
</div> 
<div id="about"> 
</div> 

</body> 
</html> 

最后，CSS：

html, body 
{ 
    width:100%; 
    height:100%; 
    background-color:#372D23; 
    margin:0; 
    padding:0; 
    position:absolute; 
    font-family:"Lucida Grande"; 
    overflow:hidden; 
} 

#logo 
{ 
    background:url("img/logo.png"); 
    position:relative; 
    margin-top:0; 
    float:right; 
    width:440px; 
    height:240px; 
} 
#comedy 
{ 
    height:124px; 
    width:45px; 
    background:url("img/comedyBtn.png"); 
    position:relative; 
    margin-left:0; 
    margin-top:-5px; 
    overflow:hidden; 
    cursor:pointer; 

} 

#tv 
{ 
    height:124px; 
    width:45px; 
    background:url("img/tvBtn.png"); 
    position:relative; 
    margin-left:0; 
    margin-top:-5px; 
    overflow:hidden; 
    cursor:pointer; 

} 

#about 
{ 
    height:124px; 
    width:45px; 
    background:url("img/aboutBtn.png"); 
    position:relative; 
    margin-left:0; 
    margin-top:-5px; 
    overflow:hidden; 
    cursor:pointer; 

} 
#print 
{ 
     height:124px; 
    width:45px; 
    background:url("img/printBtn.png"); 
    position:relative; 
    margin-left:0; 
    margin-top:0px; 
    overflow:hidden; 
    cursor:pointer; 

} 
#radio 
{ 
    height:124px; 
    width:45px; 
    background:url("img/radioBtn.png"); 
    position:relative; 
    margin-left:0; 
    margin-top:-5px; 
    overflow:hidden; 
    cursor:pointer; 

} 

#titleStrip 
{ 
    background:url("img/titleBackground.png"); 
    width:100%; 
    height:80px; 
    margin-left:0px; 
} 

#titleContainer 
{ 
    width:450px; 
    height:80px; 
    position:absolute; 
    margin-left:-450px; 
    margin-top:0px; 
} 

这工作正常，本地和在Safari 4在服务器上，但无论在本地或为Firefox 3.5.5服务器上。其实让我更具体。把鼠标悬停在#print，#radio，#tv，#comedy和#about的精灵上，在Firefox中工作正常，不起作用的是应该启动动画的点击事件。如果需要更多解释，我会很乐意详细说明。

我花了大约一个小时在线寻找解决方案，并没有找到一个。有任何想法吗？

在此先感谢你们！

Answer 1

您遇到的问题是因为Firefox不会为您的对象设置“margin-left”属性的动画效果。如果将它们更改为left，则按预期工作。

重新分解提示：

你可以得到这一行去掉所有bind('mouse...电话：

$("#print, #radio, #tv, #comedy, #about").hover(navHover, navStby); 

理想情况下，你应该做的那部分纯CSS，这个代码仅适用于IE6的后备。 （:hover在IE7 +，Firefox和Safari浏览器div作品）

进一步重构：

要么接受，要么离开它，但这里是使用所有相同的CSS你原来一个重构版本。你的网站很好。我非常喜欢你所做的标签和标题！

重构javascript.js文件：https://gist.github.com/471ab8a968b1394a359e

Answer 2

您正在重复这样的方式太多的代码。

首先将class =“nav-button”添加到所有导航按钮。

而不是重复代码多次做几乎相同的事情创建功能，足够聪明，知道该怎么做在所有状态。

$(document).ready(initialize); 
var currentSelection = null; 
var previousSelection = null; 
function initialize(){ 
    $('.nav-button').hover(navHover, navStby) 
    .bind("click", selectArea); 
} 
function navHover(){ 
    $(this).addClass('hover'); 
} 
function navStby(){ 
    $(this).removeClass('hover'); 
} 
function selectArea(){ 
    if(!currentSelection){ 
     $(this).animate({"left":"-40px"}, 500, loadArea); 
    } else { 
     $("#titleContainer").animate({"left":"-450"}, 1000); 
     currentSelection.animate({"left":"0px"}, 500); 
     $(this).animate({"left":"-40px"}, 500, loadArea); 
    } 
} 
function loadArea(){ 
    var class = this.id; 
    currentSelection = $(this); 
    $("#titleContainer").removeClass('print radio tv comedy about') 
    .addClass(class) 
    .animate({'left':'0'}, 1000); 
} 

此代码使得您可以使用css来完成CSS最擅长的功能，即样式。让你的css

html, body 
{ 
    width:100%; 
    height:100%; 
    background-color:#372D23; 
    margin:0; 
    padding:0; 
    position:absolute; 
    font-family:"Lucida Grande"; 
    overflow:hidden; 
} 

#titleContainer{ 
    background-repeat: no-repeat; 
} 


#logo 
{ 
    background:url("img/logo.png"); 
    position:relative; 
    margin-top:0; 
    float:right; 
    width:440px; 
    height:240px; 
} 
#comedy 
{ 
    height:124px; 
    width:45px; 
    background:url("img/comedyBtn.png"); 
    position:relative; 
    left:0; 
    margin-top:-5px; 
    overflow:hidden; 
    cursor:pointer; 

} 

#tv 
{ 
    height:124px; 
    width:45px; 
    background:url("img/tvBtn.png"); 
    position:relative; 
    left:0; 
    margin-top:-5px; 
    overflow:hidden; 
    cursor:pointer; 

} 

#about 
{ 
    height:124px; 
    width:45px; 
    background:url("img/aboutBtn.png"); 
    position:relative; 
    left:0; 
    margin-top:-5px; 
    overflow:hidden; 
    cursor:pointer; 

} 
#print 
{ 
    height:124px; 
    width:45px; 
    background:url("img/printBtn.png"); 
    position:relative; 
    left:0; 
    margin-top:0px; 
    overflow:hidden; 
    cursor:pointer; 

} 
#radio 
{ 
    height:124px; 
    width:45px; 
    background:url("img/radioBtn.png"); 
    position:relative; 
    left:0; 
    margin-top:-5px; 
    overflow:hidden; 
    cursor:pointer; 

} 

#titleStrip 
{ 
    background:url("img/titleBackground.png"); 
    width:100%; 
    height:80px; 
    left:0px; 
} 

#titleContainer 
{ 
    width:450px; 
    height:80px; 
    position:absolute; 
    left:-450px; 
    margin-top:0px; 
} 

.nav-button.hover{ 
    background-position: 0px 124px !important; 
} 
.print{ 
    background-image: url('img/printTitle.png'); 
} 
.radio{ 
    background-image: url('img/radioTitle.png'); 
} 
.tv{ 
    background-image: url('img/tvTitle.png'); 
} 
.comedy{ 
    background-image: url('img/comedyTitle.png'); 
} 
.about{ 
    background-image: url('img/aboutTitle.png'); 
}