CODEWITHSUNDEEP
javascriptjquery
SOLDIER-OF-FORTUNE
SOLDIER-OF-FORTUNE

Reputation: 1654

add class and fadeIn using jquery

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

Upvotes: 1

Views: 1204

Answers (4)

Faust
Faust

Reputation: 15394

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'));

Upvotes: 1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

I would add to all your <map> elements a common class and the id of the target element as a data attribute

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

and use a single jquery block to handle all cases

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

You should add a common class to all your rs1, rs2 ... like this

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

and your CSS should be

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

Upvotes: 0

gabitzish
gabitzish

Reputation: 9691

$("li#rs1") can be replaced with $("#rs1").

Also, you don't need 13 blocks of code if your id's are #rs1 ... #rs13. You can use a loop to iterate through your items :

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

You can use chaining for your actions on the same item :

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

In order to make your fadeIn work, you should use either display:none + fadeIn(), either opacity:0 + fadeIn(). As far as I know, visibility:hidden doesn't work with fadeIn().

Edit:

If you need to make other actions on your areas, you can apply the code written above. This is how you can append id's to the areas:

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

Upvotes: 1

Lixus
Lixus

Reputation: 296

I guess you are trying to add a class to each area when the map is hovered and fade it in. In that case, you can do it like that:

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

Upvotes: 1

Related Questions