Adding css with jQuery based on class

Question

Seeking a solution to my problem...

I partially found an answer from another thread on here, using this script

$(function () {
$(".myclass").hover(function ()
{}, function ()
{
    $(".myclass>li").fadeTo(200, 1)
});
$(".myclass>li").hoverIntent(function ()
{
    $(this).attr("id", "current");
    $(this).siblings().fadeTo(200, .6);
    $(this).fadeTo(300, 1)
}, function ()
{
    $(".myclass>li").removeAttr("id");
    $(this).fadeTo(200, 1)
})})

When an item in the list is hovered, the script fades all other items out. Original demo is here http://jsbin.com/usobe

This works OK on my site, though the list ( a grid of thumbnails) is part of a bigger slider script, which loads "previews" via ajax. When a list item is clicked a hidden section expands on the page, and the slider script assigns the list item a class "active".

When the hidden section is open I would like the activated thumbnail to remain at 1 opacity, while the rest are faded to .6, exactly as it is with the hover effect using the script above. What I am trying to achieve becomes obvious when you click a thumbnail to activate the ajax script. Is it possible to use the active class to make this happen i.e. if class is not active set to .6 opacity?

Thanks in advance

----EDIT

Thanks everyone for suggestions - I am not having much luck so far! Using the code above, would it be possible to modify it so that when a list item is clicked it holds the specified levels of opacity? That would do nicely, I think. Then I could use onclick I guess to fade all items back to full opacity when the hidden div is closed.

Yes. If I understand correctly, you can set all thumbnails to .6 opacity in the CSS and .active to 1 in the CSS. — orolo
– orolo, Commented May 18, 2012 at 19:08
You are trying to keep the thumbnails with opacity of .6 when the hidden div shows up? — Luis
– Luis, Commented May 18, 2012 at 19:23

Luis · Accepted Answer · 2012-05-18 20:24:12Z

1

I'm trying to guess how your code work, for what I understand you should do something like this:

// this is the selector that gets the click on the thumbnail
$('li.item').click(function() {
    // fade all the thumbnails to op 1.0
    $('#li.item').css('opacity', '.6');
    // let the active thumbnail to 1.0
    $(this).css('opacity', 1);

    //show your hidden div
});

Then, when you close the hidden div:

$('div#hiddenDiv').onClose(function()
    // about to close
    $(this).fadeTo('fast', 1);
});

answered May 18, 2012 at 20:24

Luis

5,9048 gold badges46 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Charlie W · Accepted Answer · 2012-05-18 20:16:36Z

0

You could use an on click targeting the zetaThumbs li elements, set the current target to 1 and its siblings to .6

 $('.zetaThumbs li').click(function(){
    $(this).css({'opacity':1}).siblings().css({'opacity':.6});
 })

answered May 18, 2012 at 20:16

Charlie W

397 bronze badges

Collectives™ on Stack Overflow

Adding css with jQuery based on class

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related