Question

我有以下代码：

$("#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。我有li'rs1设置为visibility:hidden的css，当应用该类时，我只是将其设置为。

我如何利用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

$("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 2

您的选择器可以选择所有相关项目：

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

或者，如果您在列表中有个ID（例如：<ul id='myUlId'>），那就更容易了：

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
要应用具有与悬停区域对应的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，但向后兼容）的事情就是将索引放在数据属性中，如下所示：

    <area data-li-id="4">

然后在这个区域的悬停功能中为一条线中的li 抓取一个滑块：

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

Answer 3

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

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

Answer 4

我会将所有<map>元素添加到公共类中，并将目标元素的id添加为数据属性

<map id="rade_img_map_1335255669666" name="rade_img_map_1335255669666" class="hover_map" data-targetid="rs1">
  <area href="#" coords="10,10,162,48" shape="RECT" />
  <area href="#" coords="30,4,112,18" shape="RECT" />
</map>
<map id="rade_img_map_1335255669667" name="rade_img_map_1335255669667" class="hover_map" data-targetid="rs2">
  <area href="#" coords="10,10,162,48" shape="RECT" />
  <area href="#" coords="30,4,112,18" shape="RECT" />
</map>
...<etc>...

并使用单个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添加一个公共类......就像这样

<div id="rs1" class="inactive">...</div>
<div id="rs2" class="inactive">...</div>

你的CSS应该是

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

使用jquery添加class和fadeIn

4 个答案: