查找ID并添加动画类

我尝试进行稍微不同的菜单设置。我所有的标签都必须有一个ID才能移动。但是当你在连接上运行你的鼠标时，它应该从底部有一个文本框的地方动画。我怎样才能让jquery找到指定的id然后添加一个类给动画？查找ID并添加动画类

这里是我的代码：

HTML：

<div id="right_nav"> 
    <ul> 
     <li><a id="nav_1" href="#">#</a></li> 
     <li><a id="nav_2" href="#">#</a></li> 
     <li><a id="nav_3" href="#">#</a></li> 
     <li><a id="nav_4" href="#">#</a></li> 
     <li><a id="nav_5" href="#">#</a></li> 
     <li><a id="nav_6" href="#">#</a></li> 
     <li><a id="nav_7" href="#">#</a></li> 
     <li><a id="nav_8" href="#">#</a></li> 
     <li><a id="nav_9" href="#">#</a></li> 
    </ul> 
</div>

CSS：

#right_nav { width:700px; height:auto; float:left;} 
#right_nav ul { width:100%; height:100%; margin:0; padding:0;} 
#right_nav ul li { list-style-type:none; float:left;} 
#nav_1 { width: 250px; height:160px; background-color:#33CCCC; margin: 0px 0 0 5px; position:absolute;} 
#nav_2 { width: 230px; height:400px; background-color:#66F; margin: -100px 0 0 260px; position:absolute;} 
#nav_3 { width: 250px; height:100px; background-color:#693; margin: 329px 0 0 447px; position:absolute;} 
#nav_4 { width: 200px; height:200px; background-color:#CC9; margin: 200px 0 0 29px; position:absolute;} 
#nav_5 { width: 190px; height:300px; background-color:#F9C; margin: 0 0 0 510px; position:absolute;} 
#nav_6 { width: 250px; height:200px; background-color:#CF0; margin: 450px 0 0 450px; position:absolute;} 
#nav_7 { width: 150px; height:200px; background-color:#F99; position:absolute; margin: 320px 0 0 250px;} 
#nav_8 { width: 220px; height:200px; background-color:#693; position:absolute; margin: 420px 0 0 0;} 
#nav_9 { width: 150px; height:100px; background-color:#693; position:absolute; margin: 540px 0 0 250px;} 
.hover { width:50px; height:25px; background-color:#993300; }

的jQuery：

$(document).ready(function() {  
    $("#right_nav ul li").hover(function(){  
     $('#right_nav ul li').addClass("hover");  
    }, 
    function(){  
     $('#right_nav ul li').removeClass("hover");  
    }); 
});

我能第一个链接上添加.Hover但如果我在其他环节运行鼠标不起作用

来源

2012-04-04 Kasper

如果你看一下你的代码，你会看到你所添加的类所有的LI，不你徘徊的那个人。试试这个：

$(document).ready(function() {  
    $("#right_nav ul li").hover(function(){ 
     $(this).addClass("hover");  
    },  
    function(){  
     $(this).removeClass("hover");  
    }); 
});

来源

2012-04-04 13:40:20

如果我这样做的话它的工作原理。 $（文件）。就绪（函数（）{ $（ “＃right_nav UL利A”）悬停（函数（）{$ （本）.addClass（ “悬停”）;} ，功能（）{ $（this）.removeClass（“hover”）; }）; }）; 但我现在可以看到，我必须拥有一个隐藏的类，并且当您将鼠标悬停在链接上时变为可见 – Kasper 2012-04-04 13:51:55

我会改变你的最后CSS符合：

#right_nav ul li:hover { width:50px; height:25px; background-color:#993300; }

所以你不需要任何JS做到这一点。我不知道这是不是你想要的。你试图“动画”的“盒子”在哪里/哪里？沿着这些线可能是：

$(document).ready(function() {  
    $("#right_nav ul li").hover(function(){ 
     //gets the hovered element's id 
     var hovered_li_id = $(this).attr('id'); 

     //adds .hover to an element with id "hoverbox_nav_X" and then eventually animates it 
     $('#hoverbox_'+hovered_li_id).addClass('hover').animate(/*...*/); 
    }, 
    function(){ 
     //removes .hover from wherever it was set and eventually resets any css the animation modified. 
     $('.hover').removeClass('hover').css(/*...*/); 
    });

来源

2012-04-04 13:56:08 keystorm

查找ID并添加动画类

回答

相关问题