个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-01 03:05:56 24 4
gpt4 key购买 nike

我正在使用 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 的悬停 Sprite 在 Firefox 中工作正常，但不起作用的是应该启动动画的单击事件。如果需要更多解释，我很乐意详细说明。

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

提前谢谢大家!

最佳答案

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

重构技巧:

您可以使用这一行摆脱所有 bind('mouse... 调用:

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

理想情况下，您应该使用纯 CSS 来完成该部分，并使用此代码仅作为 IE6 的后备。 (div 上的 :hover 适用于 IE7+、Firefox 和 Safari)

进一步重构:

接受或保留它，但这里是一个重构版本，它使用与原始版本相同的 CSS。您的网站进展顺利。我真的很喜欢你的标签和标题!

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

关于JQuery 在 Firefox 中不工作，但在 Safari 中工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1857331/

24 4 0
文章推荐： javascript - windows.open() 之后未开始下载
文章推荐： r - 当美学填充基于两个因素的相互作用时更改堆叠条形顺序
文章推荐： python - 使用 urllib.request 时出现 HTTP 错误
文章推荐： javascript - Symfony - 如何使用 Sweet Alert 使用路由进行表单提交？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com