悬停/淡入淡出/动画图像的 JQuery 帮助答案

【问题标题】：JQuery Help with Hover/Fade/Animate Image悬停/淡入淡出/动画图像的 JQuery 帮助
【发布时间】：2009-11-28 09:47:50
【问题描述】：

我想创建一个 javascript/jquery 以便当我将鼠标悬停在

项目，2 或 3 类被称为悬停图像，因为会有“左”、“中”和“右”图像。左右会固定宽度，但中间必须根据剩余宽度的大小增长。

我尝试使用 lavalamp 效果，但是停止移动功能看起来很奇怪，但这就是我能想到/实现的全部。但是后来我遇到了另一个问题，我希望“悬停”图像淡入淡出。

你可以看看这个菜单，它是我目前所取得的成果 - http://valkesh.000space.com

基本上代码如下-

<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>

如果有人能指导我至少用 2 或 3 张图片进行悬停，我将不胜感激

谢谢

【问题讨论】：

我发现很难准确理解您要寻找的效果。您能否提供进一步的说明？
基本上我有一个菜单，带有灵活宽度的“li”项目（我不会事先知道这些宽度），因此在悬停这些“li”项目时，我希望悬停图像分为 3 个类.覆盖前 5px 的“左”图像，覆盖最后 5px 的“右”图像，以及将根据“li”的剩余宽度增长的“中间”图像我遇到的问题是我只能得到它适用于一个静态图像，但假设第一个“li”的宽度为 100px，第二个“li”的宽度为 150px，则悬停图像不能是静态宽度。希望这会有所帮助谢谢
只是为了添加到我之前的评论中，首页的宽度和联系我们的宽度并不相同，因此我希望图像相应地增长它们的宽度（我不知道，因为菜单的文本是由软件在运行时为用户生成的）然后我希望悬停图像（在我的第一篇文章中给出的我的网站上显示的蓝色圆形按钮）淡入淡出而不是制作悬停效果静态
您是否尝试使用多个背景图片？
基本上是的，单个悬停的多个背景图像（3 个图像）...正如我所说，左图像、中间图像和右图像...是否可以加载 3 个类（1每个图像的类）到 1 个悬停事件？

标签： jquery hover jquery-animate fade

【解决方案1】：

试试这个代码，因为我想我可以按照你的意愿去做。我拉出了你的fadeIn 和fadeOut 动画并将它们放到一个单独的悬停中（对于<ul>）。我没有接触 CSS 或 HTML。

$(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);       
 });
})

【讨论】：