带悬停/淡入/动画图像的JQuery帮助
我想创建一个javascript/jquery，这样当我悬停一个带悬停/淡入/动画图像的JQuery帮助,jquery,hover,jquery-animate,fade,Jquery,Hover,Jquery Animate,Fade,我想创建一个javascript/jquery，这样当我悬停一个项时，2或3个类被称为悬停图像，因为将有一个“左”、“中”和“右”图像。左侧和右侧的宽度是固定的，但中间的宽度必须根据剩余宽度的大小而增加 我尝试使用lavalamp效果，但是停止运动功能看起来很奇怪，但这就是我所能想到/实现的。然而，后来我遇到了另一个问题，一个我希望“悬停”图像淡入淡出的问题 你可以看看这个菜单，这是我到目前为止所做的- 基本上代码如下- <style type="text/css"> ul.nav
<style type="text/css">
ul.nav { list-style:none; overflow:hidden; }
ul.nav li { float:left; height:39px; background-color:#666666; padding:0 5px; }
ul.nav li.last { -moz-border-radius-topright:9px; -webkit-border-top-right-radius:9px;
-moz-border-radius-bottomright:9px; -webkit-border-bottom-right-radius:9px;
}
ul.nav li.bg { margin:7px 0px 0px 3px; padding-right:8px; position:absolute; z-index:50; left:155px; width:60px; background:url(bg-right.png) no-repeat right top; }
ul.nav li .left{ background:url(bg.png) no-repeat left top; height:39px; }
ul.nav li a {padding:8px 20px; color:#000000; font-size:18px; font-weight:bold; display:block; text-decoration:none; z-index:100; position:relative; }
</style>
<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
<script src="jquery.easing.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#nav1 li.bg').css({opacity: 0, visibility: "visible"});
$('#nav1 li a').hover(function()
{
var offset=$(this).offset();
var thiswidth =$(this).width()+13;
$('#nav1 li.bg').stop().animate({left:offset.left+"px",width:thiswidth+"px"},100);
$('#nav1 li.bg').css({opacity: 0, visibility: "visible"}).animate({opacity: 100});
},
function()
{
$('#nav1 li.bg').stop().animate({left:"155px",width:"60px"},100);
$('#nav1 li.bg').css({opacity: 0, visibility: "visible"});
});
});
</script>
<body>
<div class="menucontainer" style="margin-top:15px;">
<ul class="nav" id="nav1">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
<li class="bg"><div class="left"></div></li>
</ul>
</div>
</body>
ul.nav{列表样式：无；溢出：隐藏；}
ul.nav li{浮动：左；高度：39px；背景色：#666666；填充：0 5px；}
ul.nav li.last{-moz边框右上角半径：9px；-webkit边框右上角半径：9px；
-moz边框右下角半径：9px；-webkit边框右下角半径：9px；
}
ul.nav li.bg{margin:7px 0px 0px 3px；padding right:8px；position:absolute；z-index:50；left:155px；width:60px；background:url（bg right.png）不重复右上；}
ul.nav li.left{背景：url（bg.png）不重复左上；高度：39px；}
ul.nav li a{填充：8px 20px；颜色：000000；字体大小：18px；字体重量：粗体；显示：块；文本装饰：无；z索引：100；位置：相对；}
$（文档）.ready（函数（）
{
$（'#nav1 li.bg'）.css（{opacity:0，visibility:visible}）；
$（'#nav1 li a'）。悬停（函数（）
{
var offset=$（this.offset（）；
var thiswidth=$（this）.width（）+13；
$（'#nav1 li.bg'）.stop（）.animate（{left:offset.left+“px”，width:thiswidth+“px”}，100）；
$（'#nav1 li.bg'）.css（{opacity:0，visibility:visibility}）.animate（{opacity:100}）；
},
函数（）
{
$（#nav1 li.bg'）.stop（）.animate（{左：“155px”，宽：“60px”}，100）；
$（'#nav1 li.bg'）.css（{opacity:0，visibility:visible}）；
});
});
谢谢请尝试一下这段代码，因为我想我可以让它实现您想要的功能。我拉出了你的fadeIn和fadeOut动画，并将它们放在一个单独的悬停位置（对于
$(document).ready(function(){
$('#nav1 li.bg').css({opacity: 0, visibility: "visible"});
$('#nav1').hover(function(){
$('#nav1 li.bg').animate({opacity: 1, visibility: "visible"},400);
}, function(){
$('#nav1 li.bg').animate({opacity: 0, visibility: "hidden"},400);
})
$('#nav1 li a').hover(function(){
var offset=$(this).offset();
var thiswidth =$(this).width()+13;
$('#nav1 li.bg').animate({left:offset.left+"px",width:thiswidth+"px"},100);
}, function(){
$('#nav1 li.bg').animate({left:offset.left+"px",width:"60px"},100);
});
})
我发现很难确切地理解你想要的效果。你能提供任何进一步的澄清吗？基本上我有一个菜单，带有灵活宽度的'li'项（我事先不知道这些宽度），因此在这些'li'项的悬停上，我希望悬停图像分为3类。“左”图像覆盖第一个5px，“右”图像覆盖最后一个5px，“中间”图像将根据“li”的剩余宽度增长我的问题是，我只能让它与一个静态图像一起工作，但假设第一个“li”的宽度为100px，第二个“li”的宽度为150px，悬停图像不能是静态宽度。希望这有助于感谢除了我之前的评论之外，主页的宽度和联系我们的宽度是不一样的，因此我希望图像根据其宽度增长（我不知道，因为菜单的文本是由软件在运行时为用户生成的），然后我想要悬停图像（我在第一篇文章中给出了我的网站上显示的蓝色圆形按钮）fadeIn和fadeOut，而不是使悬停效果静止。你是否尝试使用多个背景图像？基本上是的，多个背景图像（3个图像）对于单个悬停…正如我所说的，左图像、中图像和右图像…是否可以将3个类（每个图像一个类）加载到一个悬停事件中？