Javascript 在jquery中使用数学隐藏/显示动画背景

晚上好，我累了，已经为此奋斗了几个小时。我正在使用我找到的一个样本，并根据我的需要修改它。它使用jquery.bgpos.js创建一个滑动背景，当鼠标经过另一层（导航）后，该背景会发生变化。它在页面中使用了定位和一些内联样式，我无法使内容正确匹配

下面是我的例子。当您将鼠标悬停在文本选项卡上时，背景会发生变化，但不会正确定位，因为我搞砸了。我讨厌在这里发布所有这些代码，但我的时间不多了，只能找一个更了解我的人来纠正我的错误。谢谢

以下是带有背景的菜单的html：

<div id="menuWrapper" class="menuWrapper bg1">
                <ul class="menu" id="menu">
                    <li class="bg1" style="background-position:0 0;">
                        <a id="bg1" href="#">Home</a>
                        <ul class="sub1" style="background-position:0 0;">
                            <li><a href="#">Story</a></li>
                            <li><a href="#">Profile</a></li>
                            <li><a href="#">Discography</a></li>
                        </ul>
                    </li>
                    <li class="bg1" style="background-position:-163px 0px;">
                        <a id="bg2" href="#">News</a>
                        <ul class="sub2" style="background-position:-163px 0;">
                            <li><a href="#">Submenu 1</a></li>
                            <li><a href="#">Submenu 2</a></li>
                            <li><a href="#">Submenu 3</a></li>
                        </ul>
                    </li>
                    <li class="bg1" style="background-position:-299px 0px;">
                        <a id="bg3" href="#">The Band </a>
                        <ul class="sub3" style="background-position:-163px 0;">
                            <li><a href="#">Submenu 1</a></li>
                            <li><a href="#">Submenu 2</a></li>
                            <li><a href="#">Submenu 3</a></li>
                      </ul>
                  </li>
                  <li class="bg1" style="background-position:-449px 0px;">
                        <a id="bg4" href="#">Shows </a>
                        <ul class="sub4" style="background-position:-163px 0;">
                            <li><a href="#">Submenu 1</a></li>
                            <li><a href="#">Submenu 2</a></li>
                            <li><a href="#">Submenu 3</a></li>
                      </ul>
                  </li>
                    <li class="bg1" style="background-position:-599px 0px;">
                        <a id="bg5" href="#">The Music</a>
                        <ul class="sub5" style="background-position:-163px 0;">
                            <li><a href="#">Submenu 1</a></li>
                            <li><a href="#">Submenu 2</a></li>
                            <li><a href="#">Submenu 3</a></li>
                        </ul>
                    </li>
                    <li class="last bg1" style="background-position:-754px 0px;">
                        <a id="bg6" href="#">Videos</a>
                        <ul class="sub6" style="background-position:-163px 0;">
                            <li><a href="#">Submenu 1</a></li>
                            <li><a href="#">Submenu 2</a></li>
                            <li><a href="#">Submenu 3</a></li>
                        </ul>
                    </li>
                </ul>
            </div>

最后，这里是我页面中的js（踢我的但是的部分）

$（函数（）{
/*当前显示的
的位置*/
无功电流=0；
var=0；
对于（var i=1；i我仍然有点不确定您的问题是什么。当我最初查看页面时，背景被弄乱了，但当我开始在东西上滑动鼠标后，它实际上使它们排成一行

它们最初看起来不正确的原因可能与以下事实有关：UL.subN初始背景位置是
-163px 0
。但是，当您以编程方式将其更改为“mouseout”时，您将其设置为-489px。我怀疑如果您从-489px开始使用它们，那么它将起作用

我希望这是有帮助的，但如果不是的话，可能是一个屏幕截图，上面的页面看起来有点不对劲。
我仍然有点不确定你的问题是什么。当我最初看页面时，背景被弄乱了，但当我开始用鼠标移动东西后，它实际上让它们排成了一行

它们最初看起来不正确的原因可能与以下事实有关：UL.subN初始背景位置是
-163px 0
。但是，当您以编程方式将其更改为“mouseout”时，您将其设置为-489px。我怀疑如果您从-489px开始使用它们，那么它将起作用

我希望这会有所帮助，但如果不是的话，也可能是一张你觉得不对劲的页面截图。
看看这个演示，我觉得背景不错。当我将鼠标移到每个菜单项上时，一堆图像从侧面滑入，并排列成一个大的、看不见的图像。因此，它在某些浏览器中也可以工作（我在firefox中测试过）或者我没有抓住重点。我能看到的唯一问题是，顶部的菜单在乐队和音乐上开始重叠，因为它们被分成两行。谢谢Chris。我遇到的麻烦是，在鼠标移出后，彩色框子菜单的位置没有隐藏。这与我在javascript页面中的位置有关想想……甚至css。它几乎完全可以正常工作。如果我理解正确的话，我想你所说的重叠只是字体没有正确呈现。这些子菜单的偏离位置主要在页面的初始加载时看起来是错误的。当你开始将鼠标悬停在选项卡上时，它们似乎可以正常工作是的，菜单重叠是由于字体造成的。我怀疑很少有人会使用“Bebas Neue”字体，因为它不是标准字体。请确保使用下一种可用字体（arial）进行测试因此，你可以确保它适用于没有字体的用户。看看这个演示，我觉得它的背景不错。当我将鼠标移到每个菜单项上时，一堆图像从侧面滑入，并排列成一个大的无视觉图像。因此，它在某些浏览器中也可以工作（我在firefox中测试过）或者我没有抓住重点。我能看到的唯一问题是，顶部的菜单在乐队和音乐上开始重叠，因为它们被分成两行。谢谢Chris。我遇到的麻烦是，在鼠标移出后，彩色框子菜单的位置没有隐藏。这与我在javascript页面中的位置有关想想……甚至css。它几乎完全可以正常工作。如果我理解正确的话，我想你所说的重叠只是字体没有正确呈现。这些子菜单的偏离位置主要在页面的初始加载时看起来是错误的。当你开始将鼠标悬停在选项卡上时，它们似乎可以正常工作是的，菜单重叠是由于字体造成的。我怀疑很少有人会使用“Bebas Neue”字体，因为它不是标准字体。请确保使用下一种可用字体（arial）进行测试因此，您可以确保它适用于没有字体的用户。我的示例是statewideemergency.com/beta2。我会处理字体问题，但它似乎在Firefox中对Mac和PC都有效。我还没有在IE、Chrome、Safari或Opera中尝试过。@godleuf:是的，我看了您给出的示例页面。只是在一个地方，您似乎在说当你把鼠标放在上面，它就会出错，当我把鼠标放在上面，事情会变得更好…如果字体安装在电脑上，不管浏览器是什么，它都会工作。如果你发现一台电脑没有字体，你会很有希望看到问题。我在回答中提到的定位能解决你的问题吗？太好了！谢谢你的指点我的方向是正确的。熬夜和计算数字不能混为一谈……有你在上面指出的错误，还有其他一些简单的数学错误影响了我现在在几个小时的睡眠后意识到的位置：）谢谢你和我粘在一起，伙计！我一定是把我的css搞砸了，没有正确地写上@字体。我会努力的，但我很高兴看到导航/滑块背景：）我的例子是statewideemergency.com/beta2。我会处理字体问题，但它似乎在Firefox中对Mac和PC都有效。我还没有在IE、Chrome、Safari或Opera中尝试过。@godleuf:是的，我看过这个例子
/* MENU */
.menuWrapper{
    font-family: "Bebas Neue", Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    text-transform:uppercase;
    letter-spacing: normal;
    line-height: 1.45em;
    height:485px;
    width:980px;
    background-position:0 0;
    background-repeat:no-repeat;
    background-color:transparent;
    margin-top: 0px;
    margin-right: 10px;
    margin-bottom: 0px;
    margin-left: 10px;
    float: left;
}
ul.menu{
    list-style:none;
    width:980px;
}
ul.menu > li{
    float:left;
    width:163px;
    height:542px;
    background-repeat:repeat-x;
    background-color:transparent;
}
ul.menu > li.last{
    border:none;
}
.bg1{
    background-image: url(../images/1.jpg);
}
.bg2{
    background-image: url(../images/2.jpg);
}
.bg3{
    background-image: url(../images/3.jpg);
}
.bg4{
    background-image: url(../images/4.jpg);
}
.bg5{
    background-image: url(../images/5.jpg);
}
.bg6{
    background-image: url(../images/6.jpg);
}
ul.menu > li > a{
    float:left;
    width:163px;
    height:50px;
    text-align:center;
    line-height:1.5em;
    color:#FFF;
    background-color:#000;
    letter-spacing:1px;
    cursor:pointer;
    text-decoration:none;
    font-size: 2.25em;
}
ul.menu > li ul{
    list-style:none;
    float:left;
    margin-top:0px;
    width:100%;
    height:110px;
    padding-top:20px;
    background-repeat:no-repeat;
    background-color:transparent;
}
ul.menu > li ul li{
    display:none;
}
ul.menu > li ul.sub1{
    background-image:url(../images/bg1sub.png);
}
ul.menu > li ul.sub2{
    background-image:url(../images/bg2sub.png);
}
ul.menu > li ul.sub3{
    background-image:url(../images/bg3sub.png);
}
ul.menu > li ul.sub4{
    background-image:url(../images/bg1sub.png);
}
ul.menu > li ul.sub5{
    background-image:url(../images/bg2sub.png);
}
ul.menu > li ul.sub6{
    background-image:url(../images/bg3sub.png); 
}
ul.menu > li ul li a{
    color:#fff;
    text-decoration:none;
    line-height:1.25em;
    margin-left:20px;
    font-size:1.5em;
    width: 163px;
}
ul.menu > li ul.sub1 li{
    display:block;
}
ul.menu > li ul li a:hover{

}

<script type="text/javascript">
    $(function() {
    /* position of the <li> that is currently shown */
    var current = 0;

    var loaded  = 0;
    for(var i = 1; i <4; ++i)
    $('<img />').load(function(){
    ++loaded;
    if(loaded == 3){
    $('#bg1,#bg2,#bg3,#bg4,#bg5,#bg6').mouseover(function(e){

    var $this = $(this);
    /* if we hover the current one, then don't do anything */
    if($this.parent().index() == current)
    return;

    /* item is bg1 or bg2 or bg3, depending where we are hovering */
    var item = e.target.id;

    /*
    this is the sub menu overlay. Let's hide the current one if we hover the first <li> or if we come from the last one, then the overlay should move left -> right, otherwise right->left
    */
    if(item == 'bg1' || current == 5)
    $('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(-489px 0)"},300,function(){
    $(this).find('li').hide();
    });
    else
    $('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(163px 0)"},300,function(){
    $(this).find('li').hide();
    });

    if(item == 'bg1' || current == 5){
    /* if we hover the first <li> or if we come from the last one, then the images should move left -> right */
    $('#menu > li').animate({backgroundPosition:"(-1000px 0)"},0).removeClass('bg1 bg2 bg3 bg4 bg5 bg6').addClass(item);
    move(1,item);
    }
    else{
    /* if we hover the first <li> or if we come from the last one, then the images should move right -> left */
    $('#menu > li').animate({backgroundPosition:"(1000px 0)"},0).removeClass('bg1 bg2 bg3 bg4 bg5 bg6').addClass(item);
    move(0,item);
    }

    /*
    We want that if we go from the first one to the last one (without hovering the middle one), or from the last one to the first one, the middle menu's overlay should also slide, either from left to right or right to left.
    */
    if(current == 5 && item == 'bg1'){
    $('#menu .sub'+parseInt(current)).stop().animate({backgroundPosition:"(-163px 0)"},300);
    }
    if(current == 0 && item == 'bg6'){
    $('#menu .sub'+parseInt(current+5)).stop().animate({backgroundPosition:"(163px 0)"},300);
    }


    /* change the current element */
    current = $this.parent().index();

    /* let's make the overlay of the current one appear */

    $('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(0 0)"},300,function(){
    $(this).find('li').fadeIn();
    });
    });
    }   
    }).attr('src', 'images/'+i+'.jpg');

    /*
    dir:1 - move left->right
    dir:0 - move right->left
    */
    function move(dir,item){
    if(dir){
    $('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},200);
    $('#bg2').parent().stop().animate({backgroundPosition:"(-163px 0)"},300);
    $('#bg3').parent().stop().animate({backgroundPosition:"(-326px 0)"},400);
    $('#bg4').parent().stop().animate({backgroundPosition:"(-489px 0)"},500);
    ('#bg5').parent().stop().animate({backgroundPosition:"(-652px 0)"},600);
    $('#bg6').parent().stop().animate({backgroundPosition:"(-815px 0)"},700,function(){
    $('#menuWrapper').removeClass('bg1 bg2 bg3 bg4 bg5 bg6').addClass(item);
    });
    }
    else{
    $('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},700,function(){
    $('#menuWrapper').removeClass('bg1 bg2 bg3 bg4 bg5 bg6').addClass(item);
    });
    $('#bg2').parent().stop().animate({backgroundPosition:"(-163px 0)"},600);
    $('#bg3').parent().stop().animate({backgroundPosition:"(-326px 0)"},500);
    $('#bg4').parent().stop().animate({backgroundPosition:"(-489px 0)"},400);
    $('#bg5').parent().stop().animate({backgroundPosition:"(-652px 0)"},300);
    $('#bg6').parent().stop().animate({backgroundPosition:"(-815px 0)"},200);
    }
    }
    });
    </script>