1

OK so basically have 3 divs, all stacked vertically. Each has its own class assigned (.inner1, .inner2 and .inner3) What I'd like to have happen is when you mouse over one of them, the other 2 fade out to 40% transparent. Each would have the ability to fade the others out. Mouse over #1, and #2 and 3 fade out. Mouse over #2, and #1 and 3 fade out...does that make sense?

Thanks very much guys!

4
  • 1
    It does not make sense unless you show some code and what you have tried.. This is not a homework site where ppl get the work done for you. We can try to resolve the issue if you tried something and stuck at a certain point Jun 21, 2013 at 5:37
  • what you have tried??? mattgemmell.com/2008/12/08/what-have-you-tried Jun 21, 2013 at 5:47
  • 1
    i think all are here to give tutorial. Great SO change its policy .. strange :D Jun 21, 2013 at 5:49
  • Let Us Know What You Have Tried ??
    – jsduniya
    Jun 21, 2013 at 5:56

3 Answers 3

3

For starters this should do

You can use the mouseover and mouseleave events along with animate

$('[class*=inner]').on({
    mouseover : function() {
        $('[class*=inner]').not(this).animate({opacity : 0.4},1000);
    },
    mouseleave : function() {
        $('[class*=inner]').not(this).animate({opacity : 1},1000);
    }
});

Check Fiddle

2
  • Thats very cool! I should mention though that the 3 divs are contained within another div with INNER in its class, and I also have a few other divs with INNER as part of their titles too. That seems to make a mess of the code when I posted it here: jsfiddle.net/J8KDv/11
    – Jeff Monk
    Jun 21, 2013 at 6:11
  • @JeffMonk That is because <div class="inner_content"> causes problems as $('[class*=inner]') selects even the outer div. Just change it's class to not include inner and it should get the work done Jun 21, 2013 at 6:25
0

Try like this

$("div[class^='inner']").on('mouseover',function(){
     var selected_div = $(this);
     $("div[class^='inner']").not(this).each(function(){
              $(this).fadeOut('slow');  //you can apply any other animation effects   
     });
});

Assumed that you need to display them on mouseleave

0

Similar to the ones before:

$("div[class^='inner']").on('mouseover',function(){
     var div = $(this);
     $("div[class^='inner']").not(this).each(function(){
          $(this).fadeTo('slow', 0.4);
     });
});

$("div[class^='inner']").on('mouseout',function(){
     $("div[class^='inner']").not(this).each(function(){
          $(this).fadeTo('slow', 1);
     });
});

Example here: Example

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.