使用jquery添加class和fadeIn

我有以下代码：

$("#rade_img_map_1335199662212").hover(function () { $("li#rs1").toggleClass("active"); //Toggle the active class to the area is hovered $("li#rs1").fadeIn("slow"); }); 

我需要添加class active然后fadeIn。 我有css，其中li'rs1设置为visibility:hidden ，当应用类时，我只是设计风格。

我怎样才能利用fadeIn？

我也正在构建这个权利吗？ – 我有13种不同的li#rs1 ， li#rs2 …一直到li#rs13有不同的图像映射id。 这就是为什么我认为我需要13块代码。

编辑：我有区域ID，所以需要减少代码：

 $(document).ready(function () { $("map#rade_img_map_1335255669666 area#1").hover(function () { $("li#rs1").toggleClass("active"); //Toggle the active class to the area is hovered }); }); 

Answer 1

您的选择器可以选择所有相关项目，如下所示：

 var $items = $("#rs1, #rs2, #rs3, #rs4, #rs5, #rs6, #rs7, #rs8, #rs9, #rs10, #rs11, #rs12, #rs13"); 

或者，如果列表中有id（例如：

），

容易：

 var $items = $('#myUlId li'); 

然后：

 $("#rade_img_map_1335199662212").hover(function () { $items.toggleClass("active").fadeIn("slow"); //Toggle the active class to the area is hovered and fade in. }); 

更新 ……或者更简单，一举覆盖它！：

 $("#rade_img_map_1335199662212").hover(function () { $('#myUlId li').toggleClass("active").fadeIn("slow"); //Toggle the active class to the area is hovered and fade in. }); 

更新2
要应用具有与hover区域对应的id的li：

 $("#rade_img_map_1335199662212 area").hover(function () { var areaId = $(this).attr('id'); //grab the hovered area's it var $li = $('li#rs' + areaId); //select an li based on the hovered area $li.toggleClass("active").fadeIn("slow"); //Toggle the active class and fade in. }); 

更新3 …如果区域没有id，那么你需要一种方法从包含它的其他属性中删除相应的数字，如href。 假设hrefs在常规模式中的所有位置都有索引号，比如没有其他数字，那么你可以使用它们抓住它们

 var href = $(this).attr('href'); var id = href.match(/\d+/) 

如果您可以控制地图的标记结构，那么最酷（HTML5，但是向后兼容）的事情就是将索引放在数据属性中，如下所示：

然后在hoverfunction内的一行中抓取一个用于li的滑块，如下所示：

 var $li = $('li#' + $(this).attr('data-li-id')); 

Answer 2

我想你正试图在地图hover并将其淡入时为每个区域添加一个类。在这种情况下，你可以这样做：

 $("map#rade_img_map_1335255669666").hover(function(e){ $(this).find("area").addClass("active").fadeIn("slow"); }); 

Answer 3

$("li#rs1")可以用$("#rs1")替换。

此外，如果你的id是＃rs1 …＃rs13，你不需要13块代码。 您可以使用循环来遍历您的项目：

 for (i = 1; i <= 13; i++) $("#rs" + i) /* code here*/ 

您可以在同一项目上使用链接进行操作：

 for (i = 1; i <= 13; i++) $("#rs" + i).toggleClass("active").fadeIn("slow"); 

为了使你的fadeIn工作，你应该使用display:none + fadeIn（）， opacity:0 + fadeIn（）。 据我所知， visibility:hidden不适用于fadeIn（）。

编辑：

如果您需要对您的区域进行其他操作，您可以应用上面编写的代码。 这是你可以将id附加到这些区域的方法：

 var index = 0; $("#rade_img_map_1335255669666 area").each(function(){ index++; $(this).attr("id", "areaId" + index); }) 

Answer 4

我会将所有

元素添加到公共类中，并将目标元素的id添加为数据属性

   ...... 

并使用单个jquery块来处理所有情况

 $("map.hover_map").hover(function () { var targetId = $(this).data('targetid'), targetElement = $('#' + targetId); targetElement.toggleClass("active"); //Toggle the active class to the area is hovered if ( targetElement.is('active') ) { targetElement.css({opacity:0}).animate({opacity:1}); } }); 

您应该为所有rs1，rs2添加一个公共类……就像这样

 
...
 
... 

你的CSS应该是

 .inactive{visibility:hidden;} .active{visibility:visible;}