jquery show/hide and opacity

Here is my lehmans terms of what i am trying to accomplish.

i will have 3 100x100 px divs, floated left.

<div id="container">
     <div id="1">did you know?</div>
     <div id="2">help</div>
     <div id="3">other</div>
</di开发者_Python百科v>

when you hover or mouse over either of these 3 divs another div will appear via show(); or slideDown(); with the content specific to that topic.

question is, is there a way to make it so that when you hover over any of the divs 1,2,3, the other two will lower opacity to make them look transparen?

that part i am unable to figure out...

thanks in advance.

---

First here, make sure those IDs are valid, e.g. not starting with a number (unless you're on a HTML5 doctype).

Then you can use .animate() and .hover(), like this:

$("#container > div").css({opacity: 0.2 }).hover(function() {
  $(this).stop().animate({ opacity: 1 });
}, function() {
  $(this).stop().animate({ opacity: 0.2 }); 
});

You can try a demo here, the initial .css() call is to make them all non-hovered-ish on page load.

---

For a more complete demo, showing the content as well, try this :)

Here's that example markup:

<div id="container">
     <div>did you know?</div>
     <div>help</div>
     <div>other</div>
</div>

<div id="content">
    <div>Did You Know? Content</div>
    <div>Help Content</div>
    <div>Some other stuff</div>
</div>

and script:

$("#container > div").css({opacity: 0.2 }).hover(function() {
  $(this).stop().animate({ opacity: 1 });
  $("#content div").eq($(this).index()).stop(true, true).slideDown();
}, function() {
  $(this).stop().animate({ opacity: 0.2 });
  $("#content div").eq($(this).index()).stop(true, true).slideUp();
});

You can adjust it of course to leave the last hovered one open, etc...it's just an idea for an effect the way you descibe.

---

what about something like this:

div.onmouseover = function() {
    for(i = 0, c = this.parentNode.childNodes, e = c.length; i < e; i++) {
        if (c[i] !== this) {
            $(c[i]).css('opacity', '...');
        }
    }
}