jQuery背景图像滑块菜单滑块框未正确获取初始位置
我正试图建立我自己的菜单的基础上 我几乎成功了，但删除了包含菜单的页面。已设置动画的滑块框未正确获取其初始位置（） 但是，如果我使用alert来检查它放置的位置和宽度，在从左到右抛出带有宽度和位置详细信息的alert函数后，它在Opera&FF中运行良好，但在Chrome中运行不正常 HTML文档：jQuery背景图像滑块菜单滑块框未正确获取初始位置,jquery,animation,menu,slider,position,Jquery,Animation,Menu,Slider,Position,我正试图建立我自己的菜单的基础上 我几乎成功了，但删除了包含菜单的页面。已设置动画的滑块框未正确获取其初始位置（） 但是，如果我使用alert来检查它放置的位置和宽度，在从左到右抛出带有宽度和位置详细信息的alert函数后，它在Opera&FF中运行良好，但在Chrome中运行不正常 HTML文档： 经过一天的头脑风暴，我发现了这一点，并使菜单在CHROME、MOZ和OPERA中完美运行，尽管由于支持CSS3，在IE 9之前的版本中仍然存在一些问题，但滑动和定位在IE8及以下版本中也有效。我想你
经过一天的头脑风暴，我发现了这一点，并使菜单在CHROME、MOZ和OPERA中完美运行，尽管由于支持CSS3，在IE 9之前的版本中仍然存在一些问题，但滑动和定位在IE8及以下版本中也有效。我想你可以在IE8及以上版本中使用PIE来支持它。
所以我把工作代码放在这里。找到（） 问题是浏览器无法检索初始位置：“currentitem”的左侧，因为它们尚未在css中定义，所以浏览器在定位currentitem后会抛出值，根据浏览器放置元素本身的计算，这也是因为它的容器被定义为绝对的，所以它会在视口/屏幕中不断计算元素的位置，这与每个浏览器不同 当我使用alert为每个“currentitem”抛出宽度和位置值时，我检查了这一点&它们来自不同的浏览器。例如“currentitem”博客： 当我使用alert时，它在将“currentitem”的值放在屏幕上之前存储它的值，该值是根据其父绝对元素“menutxtwrapper”计算的，这一结果出人意料地正常 解决方案：根据上述理论，我决定将所有“li”元素和“currentitem”定义为绝对元素，并将它们放置在我需要的位置。这使得“定义其左位置”在CSS中可用，因此当文档加载每个li的左值时¤titem可用于计算 为此，我在CSS中为每个“li”添加了额外的细节，“id”，并将left和width的值放在那里。由于我在“li”中使用了“id”，所以我将[id=“currentitem”]更改为[class=“current\u item”] 对于Script menu.js，几乎没有变化。我们将newWidth计算为[newWidth=$el.width（）；]，这是在[newWidth=$el.parent（）.width（）；]之前的值，因为我们现在不是根据父元素而是根据“li”元素本身来计算新宽度 下面的新代码： 新HTML：
<body>
<div id="menu">
<div id="menutxtwrapper">
<ul id="menutxtlist_ul">
<li id="about"><a href="#"> ABOUT </a></li>
<img class="hr_divider" id="v1" src="menu-1px-divider.png"/>
<li id="service"><a href="portfolio.html"> SERVICES </a></li>
<img class="hr_divider" id="v2" src="menu-1px-divider.png"/>
<li class="current_item" id="profile"> PROFILE </li>
<img class="hr_divider" id="v3" src="menu-1px-divider.png"/>
<li id="blog"><a href="#"> BLOGS </a></li>
<img class="hr_divider" id="v4" src="menu-1px-divider.png"/>
<li id="themes"><a href="themes.html"> THEMES </a></li>
</ul>
</div>
</div>
</body>
$(document).ready(function(){
var $el, leftPos, newWidth,
$menu = $("#menutxtwrapper");
//alert("current item width is:" + $(".current_item").width());
//alert("current item Left is:" + $(".current_item").position().left);
$menu.append("<div id='slider_box'></div>");
var $sb = $("#slider_box");
$sb.width($(".current_item").width());
$sb.css("left", $(".current_item").position().left);
$sb.data("origLeft", $sb.position().left);
$sb.data("origWidth", $sb.width());
$("#menutxtlist_ul li").hover(function() {
$el = $(this);
leftPos = $el.position().left;
newWidth = $el.width();
$("#menutxtlist_ul li").css({
color: "#ff0000"});
$sb.stop().animate({
left: leftPos,
width: newWidth
},{duration:600,easing:"easeOutExpo"});
}, function() {
$sb.stop().animate({
left: $sb.data("origLeft"),
width: $sb.data("origWidth")
},{duration:1000,easing:"easeOutExpo"});
$("#menutxtlist_ul li").css({
color: "#666666"});
});
});
$（文档）.ready（函数（）{
var$el、leftPos、newWidth、，
$menu=$（“#menutxtwrapper”）；
//警报（“当前项目宽度为：”+$（“.current_item”）.width（））；
//警报（“当前项目左侧为：”+$（“.current_item”）.position（）.Left）；
$menu.append（“”）；
var$sb=$（“滑块框”）；
$sb.width（$（“.current_item”）.width（）；
$sb.css（“左”，“当前项”）.position（）.left）；
$sb.数据（“origLeft”，左$sb.位置（））；
$sb.data（“origWidth”，$sb.width（））；
$（“#menutxtlist_ul li”）.hover（函数（）{
$el=$（此项）；
leftPos=$el.position（）.left；
newWidth=$el.width（）；
$（“#菜单列表_ul li”）.css({
颜色：#ff0000“}）；
$sb.停止（）.制作动画({
左：左位置，
宽度：新宽度
}，{持续时间：600，宽松：“easeOutExpo”}）；
}，函数（）{
$sb.停止（）.制作动画({
左：$sb.data（“origLeft”），
宽度：$sb.数据（“原始宽度”）
}，{持续时间：1000，即：“easeOutExpo”}）；
$（“#菜单列表_ul li”）.css({
颜色：#666666“}）；
});
});
好的一面是，菜单是绝对的，如果你有WYSWYG编辑器，只需将菜单移动并放置在你想要的任何地方。请将代码粘贴到StackOverflow中；过几天，当你的坏代码被删除后，这个问题对于其他试图解决类似问题的人来说几乎毫无意义——所有的引用都将丢失。如果您将损坏的代码粘贴到这里，只要有社区希望保留它，它就可以被保留。谢谢。还有，请不要再喊了。它让人们更难阅读，也不会很快给你答案@萨诺尔德，谢谢你的编辑。你以一个字母和鼠标点击的速度击败了我。：）@肯·怀特，很抱歉“这篇文章已被编辑…”的消息：）我希望我没有在编辑中破坏太多其他内容。@sarnold。我做的基本上和你做的一样。我也在做链接文本中的大写字母，但它们没有那么烦人。：）
body { background:#333333; }
#slider_box {
background:url(hover-menu.png);
height:39px;
position:absolute;
top:-10px;
left:0px;
z-index:3;
border-bottom-left-radius: 10px 10px;
border-bottom-right-radius: 10px 10px;
-moz-border-bottom-left-radius: 10px 10px;
-moz-border-bottom-right-radius: 10px 10px; }
#menu {
background:url(menu-base.png);
width:525px;
height:55px;
position:absolute;
top:60px;
right: 395px;
z-index:2;
}
#menutxtwrapper {
position:absolute;
width:525px;
height:55px;
left:29px;
top:10px;
margin: 0 auto;
z-index:5;
}
#menutxtlist_ul {
position:absolute;
height:55px;
top: 0px;
left: 0px;
margin:0px;
padding:0px;
list-style:none;
z-index:6;
}
#menutxtlist_ul li {
font-family:'Cuprum', arial, serif;
font-size:16px;
letter-spacing:2px;
display:inline;
z-index:6; }
#menutxtlist_ul li a {
color:#666666;
list-style:none;
text-decoration: none;
text-transform: uppercase;
z-index:6;
-webkit-transition: color 0.5s ease-in-out;
-moz-transition: color 0.5s ease-in-out;
-o-transition: color 0.5s ease-in-out;
-ms-transition: color 0.5s ease-in-out; }
#menutxtlist_ul li a:hover {
color: #333333; }
#currentitem {
font-family:'Cuprum', arial, serif;
font-size:16px;
letter-spacing:2px;
display:inline;
color: #666666;
-webkit-transition: color 0.4s ease-in;
-moz-transition: color 0.4s ease-in;
-o-transition: color 0.4s ease-in-out;
-ms-transition: color 0.4s ease-in-out; }
#currentitem:hover { cursor:pointer; }
.hr_divider {
margin:auto 10px;
vertical-align:middle;
border:none;
text-decoration:none; }
WIDTH POSITION
CHROME 73 337
MOZILLA 78 302.3833
OPERA 77 304
<body>
<div id="menu">
<div id="menutxtwrapper">
<ul id="menutxtlist_ul">
<li id="about"><a href="#"> ABOUT </a></li>
<img class="hr_divider" id="v1" src="menu-1px-divider.png"/>
<li id="service"><a href="portfolio.html"> SERVICES </a></li>
<img class="hr_divider" id="v2" src="menu-1px-divider.png"/>
<li class="current_item" id="profile"> PROFILE </li>
<img class="hr_divider" id="v3" src="menu-1px-divider.png"/>
<li id="blog"><a href="#"> BLOGS </a></li>
<img class="hr_divider" id="v4" src="menu-1px-divider.png"/>
<li id="themes"><a href="themes.html"> THEMES </a></li>
</ul>
</div>
</div>
</body>
body { background:#333333; }
#slider_box {
background:url(hover-menu.png);
height:39px;
position:absolute;
top:-10px;
left:0px;
z-index:3;
border-bottom-left-radius: 10px 10px;
border-bottom-right-radius: 10px 10px;
-moz-border-bottom-left-radius: 10px 10px;
-moz-border-bottom-right-radius: 10px 10px; }
#menu {
background:url(menu-base.png);
width:525px;
height:55px;
position:absolute;
top:60px;
right: 382px;
z-index:2;
}
#menutxtwrapper {
position:absolute;
width:525px;
height:55px;
left:25px;
top:10px;
margin: 0 auto;
z-index:5;
}
#menutxtlist_ul {
position:absolute;
height:55px;
top: 0px;
left: 0px;
margin:0px;
padding:0px;
list-style:none;
z-index:6;
}
#menutxtlist_ul li {
position:absolute;
font-family:'Cuprum', arial, serif;
font-size:16px;
color: #666666;
letter-spacing:2px;
display:inline;
z-index:6;
-webkit-transition: color 0.4s ease-in;
-moz-transition: color 0.4s ease-in;
-o-transition: color 0.4s ease-in-out;
-ms-transition: color 0.4s ease-in-out; }
#menutxtlist_ul li a {
color:#666666;
list-style:none;
text-decoration: none;
text-transform: uppercase;
z-index:6;
-webkit-transition: color 0.5s ease-in-out;
-moz-transition: color 0.5s ease-in-out;
-o-transition: color 0.5s ease-in-out;
-ms-transition: color 0.5s ease-in-out; }
#menutxtlist_ul li a:hover {
color: #333333; }
.currentitem{
position:absolute;
display:inline;
}
.currentitem:hover{ cursor:pointer; }
.hr_divider {
position:absolute;
margin:auto 10px;
vertical-align:middle;
border:none;
text-decoration:none;
}
#v1 {
top: 0px;
left: 66px;
}
#v2 {
top: 0px;
left: 183px;
}
#v3 {
top: 0px;
left: 287px;
}
#v4 {
top: 0px;
left: 372px;
}
#about{
width:60px;
height:20px;
position:absolute;
left: 5px;
top: 8px;
text-align:center;
}
#blog{
width:60px;
height:20px;
position:absolute;
left: 311px;
top: 9px;
text-align:center;
}
#service {
width:90px;
height:20px;
position:absolute;
left: 91px;
top: 9px;
text-align:center;
}
#profile{
width:80px;
height:20px;
position:absolute;
left: 207px;
top: 9px;
text-align:center;
}
#themes{
width:70px;
height:20px;
position:absolute;
left: 395px;
top: 9px;
text-align:center;
}
$(document).ready(function(){
var $el, leftPos, newWidth,
$menu = $("#menutxtwrapper");
//alert("current item width is:" + $(".current_item").width());
//alert("current item Left is:" + $(".current_item").position().left);
$menu.append("<div id='slider_box'></div>");
var $sb = $("#slider_box");
$sb.width($(".current_item").width());
$sb.css("left", $(".current_item").position().left);
$sb.data("origLeft", $sb.position().left);
$sb.data("origWidth", $sb.width());
$("#menutxtlist_ul li").hover(function() {
$el = $(this);
leftPos = $el.position().left;
newWidth = $el.width();
$("#menutxtlist_ul li").css({
color: "#ff0000"});
$sb.stop().animate({
left: leftPos,
width: newWidth
},{duration:600,easing:"easeOutExpo"});
}, function() {
$sb.stop().animate({
left: $sb.data("origLeft"),
width: $sb.data("origWidth")
},{duration:1000,easing:"easeOutExpo"});
$("#menutxtlist_ul li").css({
color: "#666666"});
});
});