JQuery не работает в Firefox, делает в 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, что не работает, это событие 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, что и ваш оригинал. Ваш сайт идет хорошо. Мне очень нравится вкладка и заголовок, который у вас есть!

Рефакторирован 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');
}