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中工作得很好，什么不起作用的是应该启动动画的click事件。如果需要更多解释，我很乐意详细说明。

我花了大约一个小时在线寻找解决方案而没有找到解决方案。有什么想法吗？

先谢谢你们！

Answer 1

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

重新分解提示：

您可以使用以下一行删除所有bind('mouse...来电：

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

理想情况下，您应该在纯CSS中执行该部分，此代码仅作为IE6的后备。（:hover上的div适用于IE7 +，Firefox和Safari）

进一步重构：

接受或离开它，但这是一个重构版本，使用与原始CSS相同的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');
}

JQuery在Firefox中不起作用，在Safari中也是如此

2 个答案: