CODEWITHSUNDEEP
javascriptjquery
Oren Hizkiya
Oren Hizkiya

Reputation: 4434

Fade entire div except for one span with Jquery

I currently have HTML in the following structure:

<div class="mediaItem">
    <a class="articleLink" target="_blank" href="http://foo.com"></a>
    <span class="articleSummary">Summary</span>
    <span class="sourceDate">Source</span>
    <span class="remove"></span>
</div>

This html repeats itself a number of times.

I would like to fade the entire contents of the current "mediaItem" div on mouseover, except for the "remove" span, which needs to remain at an opacity of 1.

Here is the Jquery code I have so far:

$(".mediaItem").live({
    mouseenter:
         function(){
             $(this).fadeTo('fast', 0.5);
         },
    mouseleave:
         function(){
             $(this).fadeTo('fast', 1.0);
         }
    });

I have tried many combinations of selecting the entire div except for the "remove" span, but I cannot seem to get it to work with only the current "mediaItem." How can I fade everything in the "mediaItem" that is currently hovered over without effecting the "remove" span?

Upvotes: 2

Views: 974

Answers (3)

Brad Christie
Brad Christie

Reputation: 101614

how about using a different selector?

$('.mediaItem > *:not(.remove)').fade*()

Select all children, but exempt the remove child.

Upvotes: 5

George Cummins
George Cummins

Reputation: 28926

$(this).children(":not('.remove')").fadeTo('fast', 0.5);

Upvotes: 13

citizen conn
citizen conn

Reputation: 15390

You can fade each child element individually. This is how I would do it:

$(".mediaItem").live({
    mouseenter:
         function(){
             $(this).children('.articleSummary').fadeTo('fast', 0.5);
             $(this).children('.sourceDate').fadeTo('fast', 0.5);
             $(this).children('.articleLink').fadeTo('fast', 0.5);
         },
    mouseleave:
         function(){
             $(this).children('.articleSummary').fadeTo('fast', 1.0);
             $(this).children('.sourceDate').fadeTo('fast', 1.0);
             $(this).children('.articleLink').fadeTo('fast', 1.0);
         }
    });

Upvotes: 2

Related Questions