JQuery帮助悬停/淡化/动画图像

时间:2009-11-28 09:47:50

标签: jquery hover jquery-animate fade

我想创建一个javascript / jquery,以便当我悬停

  • 项时,将2或3个类称为悬停图像,因为会有一个“左”,“中”和“正确”的形象。左边和右边是固定宽度,但中间必须根据剩余宽度的大小增长。

    我尝试使用lavalamp效果,但看起来很奇怪停止移动功能,但这就是我能想到/实现的。然而,我遇到了另一个问题,我希望将'悬停'图像转换为fadeIn和fadeOut。

    你可以看看这个菜单,它是我迄今取得的成就 - 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张图片进行悬停,我将不胜感激

    由于

  • 1 个答案:

    答案 0 :(得分:0)

    尝试使用此代码,因为我认为我可以按照您的意愿执行此操作。我拿出了你的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);       
     });
    })