CODEWITHSUNDEEP
jquery
user580523
user580523

Reputation:

Toggle Opacity on other DIVs

I was looking for a simple way, probably with jQuery, of lowering the opacity of all other DIVs when hovered and returning them back in on out.

<div id="fade_container">
     <div id="fade1">Content</div>
     <div id="fade2">Content</div>
     <div id="fade3">Content</div>
     <div id="fade4">Content</div>
</div>

For example: When fade2 is hovered fade1, fade3 and fade4 should lose some opacity.

Any help would be appreciated,

Thanks!

Upvotes: 2

Views: 2228

Answers (4)

Blazemonger
Blazemonger

Reputation: 93003

http://api.jquery.com/fadeTo/

$('#fade_container div').hover(function(){  // mouseover 
  $(this).siblings().fadeTo('fast',0.5);  
}, function(){  // mouseout 
  $(this).siblings().fadeTo('fast',1.0);
});

http://jsfiddle.net/6XygU/4/

Upvotes: 3

gen_Eric
gen_Eric

Reputation: 227310

How about something like this?

$('div', '#fade_container').hover(function(){
   $('div', '#fade_container').not(this).stop().animate({
     opacity: .2
   }, 500);

   $(this).stop().animate({
     opacity: 1
   }, 500);
});

Demo: http://jsfiddle.net/Sj8x5/1/

Upvotes: 0

SeanCannon
SeanCannon

Reputation: 78046

CSS:

.faded {
    opacity:0.5;
}

JQuery:

$('#fade_container div').hover(function(){
    $(this).siblings().addClass('faded');
},function(){
    $(this).siblings().removeClass('faded');
});

Upvotes: 1

Anantha Sharma
Anantha Sharma

Reputation: 10108

have you tried looking at jquery effects library.. this library does exactly what you are looking for.

Upvotes: 0

Related Questions