当前位置：文江博客话题详情

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

发布于 2024-08-12 11:24:17 字数 1902 浏览 8 评论 0原文

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

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

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

你可以看看这个菜单，它是我迄今为止所实现的 - http://valkesh.000space.com

基本上代码如下-

原文

I would like to create a javascript/jquery so that when I hover an

item, 2 or 3 classes are called as a hovering image, since there will be a "left", "middle", and "right" image. The left and right will be fixed width, but the middle must grow according to the size of the remaining width.

I tried using the lavalamp effect, however it looks weird stopping the movement functionality, but thats all I could think of/achieve. However then I came across another problem, one that I would like the 'hover' image to fadeIn and fadeOut.

You could take a look at this menu, its what I achieved so far - http://valkesh.000space.com

Basically the code is the following-

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

I would appreciate if anyone can guide me into at least doing the hover with 2 or 3 images

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

诗化ㄋ丶相逢 2024-08-19 11:24:17

尝试一下这段代码，因为我想我可以用它来做你想要的事情。我拉出了淡入和淡出动画，并将它们放入单独的悬停中（对于

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

Try this code out as I think I got it to do what you wanted. I pulled out your fadeIn and fadeOut animations and put them into a separate hover (for the <ul>). I didn't touch the CSS or the 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);       
 });
})

回复收藏 0 原文

~没有更多了~