Question

I have the following code:

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

I need to add the class active then fadeIn. I have css which has li'rs1 set to visibility:hidden and when the class is applied i simply style that.

How can i utilise fadeIn?

Also am i structuring this right? – I have 13 different li#rs1, li#rs2 … all the way to li#rs13 with different image map ids. This is why i think i need 13 blocks of code.

EDIT: I have area ids so need need to reduce the code down:

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

Your selector can pick up all the relevant items like this:

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

OR, if you have an id on the list (e.g.: <ul id='myUlId'>), it’s even easier:

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

Then:

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

});

UPDATE …or even easier yet, cover it all in one fell swoop!:

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

});

UPDATE 2
To apply to an li with an id corresponding to the hovered area:

$("#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.

});

UPDATE 3
…if the area doesn’t have an id, then you’ll need a way to scrape the appropriate number out of some other attribute that contains it, like an href. Say the hrefs all have the index numbers somewhere in them in a regular patter, and, say, no other numbers, then you could grab them using

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

if you have control over the map’s markup structure, the coolest (HTML5, but backward-compatible) thing would be to place the indexes in a data- attribute like this:

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

Then grab a slector for the li in one line inside the hover function for the area like this:

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