Fatal编程技术网
  • jquery/
  • JQuery在Firefox中不工作，在Safari中不工作

JQuery在Firefox中不工作，在Safari中不工作

jquery firefox

JQuery在Firefox中不工作，在Safari中不工作,jquery,firefox,Jquery,Firefox,我正在使用Jquery构建一个网站，用于一些基本动画。javascript在这里： $(document).ready(initialize); var currentSelection = null; var previousSelection = null; function initialize() { $("#print").bind("mouseover", navHover); $("#print").bind("mouseout", navStby); $("#print").b

我正在使用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>
这在Safari 4的本地和服务器上都可以正常工作，但在Firefox 3.5.5的本地和服务器上都不行。事实上，让我更具体一点。在Firefox中，“打印”、“广播”、“电视”、“喜剧”和“关于”的精灵在Firefox中运行良好，但不起作用的是启动动画的点击事件。如果需要更多的解释，我很乐意详细说明

我花了大约一个小时在网上寻找解决方案，但还没有找到。有什么想法吗

提前谢谢各位

您遇到的问题是，Firefox没有在对象上设置“左边距”属性的动画。如果您将它们更改为
left
，它将按预期工作

重新分解提示：

您可以通过这一行摆脱所有的
bind（'mouse…
调用：

$("#print, #radio, #tv, #comedy, #about").hover(navHover, navStby);
理想情况下，您应该在纯CSS中完成这一部分，此代码仅作为IE6的备用代码。（
：悬停在
div上
适用于IE7+、Firefox和Safari）

进一步重构：

接受它或离开它，但这里是一个重构版本，使用所有相同的CSS作为您的原始。您的网站进展顺利。我真的很喜欢你的标签和标题的东西


重构的
javascript.js
文件：
您正在重复大量代码

首先，将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最擅长的事情，即样式设计


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');
}



你能展示你的样式表吗？没有CSS+图像很难解决问题。你能上传到一个位置让我们测试吗？我还没有发现你的代码有问题。我确实有一些建议可以缩短它，但我想先解决问题。当然：我会在一秒钟内添加CSS。好的，CSS也可以了。谢谢你的帮助现在，我真的很感谢你。到了一半！好吧，我把所有的“左边距”改为“左边距”。现在左边的标签都是动画，但是标题（#titleContainer）仍然没有从右侧滑入。有什么想法吗？是的，您的样式表中仍然设置了负的
左边距
。将其从
左边距：-450px
更改为
左边距：-450px
，您将是金色的。确实是金色的！谢谢您，先生，您帮了很大的忙。我也会看看您的提示，看看是否可以让它工作起来。再次感谢！尝试了这个，结果仍然是一样的，尽管代码更少。仍然存在[缺少]动画问题。而且，悬停状态现在已被打破。我尝试将所有的打印、广播、电视、喜剧和关于类更改回ID（假设这是您的意思），但没有骰子。想法？很好的示例代码！我会再做一步，将
bind（'mouseover'）
和
bind（'mouseout'）
更改为
。hover（navHover，navStby）


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');
}