jQuery hover fadeTo with three div's_问答_开发者

I'm using this div fadeTo code from here, which fades one of two divs, depending on hover.

What I'd like to do it add a third option - and a third div called #maindiv - in this way: "If hovering over #maindiv, don't fade either #sidebar or #primarycontainter, but if hovering over #sidebar or #primarycontainter, then fade either of those (depending on hover), but don't fade #maindiv."

How would I do that (with another else statement?) while keeping the existing else statement that keeps IE6 from using any of the code? Thanks....

Edit 2/3/10: Is there a different method of handling this because of the three divs? Is a callback needed, or someway to refresh the function, as the code below results in inconsistent fadeTo action?

$(document).ready(function(){

    if ($.browser.version = jQuery.browser.msie &&
        parseInt(jQuery.browser.version) == 6) {
    } else {

        $("#sidebar").fadeTo('fast', 0.5);
        $("#sidebar").hover(function(){
                $(this).stop().fadeTo('fast', 1);
                $("#primarycontainer").stop().fadeTo('fast', 0.5);
            },function(){
                $(this).stop().fadeTo('fast', 0.5);
                $("#primarycontainer").s开发者_如何学编程top().fadeTo('fast', 1);
            }
        );
    }
});

Edit 2/09/10:

Ed Woodcock's answer below works, with a slight modification (of my choosing) in my comments to his answer.

This is the CSS in question:

<body>

<div id="outerdiv" div style="position: relative;">

<div id="maindiv" div style="position:relative;">Lorem ipsum dolor sit amet.</div>

<div id="content">      

<div id="primary" div style="float: left; margin-right: -20.0em; width: 100%;">
<div id="primarycontainer" div style="margin-right: 16.0em;">

<p>Lorem ipsum dolor sit amet.<p>

</div></div>

<div id="sidebar" div style="float: right; width: 15.0em;">Lorem ipsum dolor sit amet.</div>

</div></div>

</html>
</body>

This should do the trick, it's hardly elegant but it shouldn't be too hard to refine it:

    $(document).ready(function() {

        if ($.browser.version = jQuery.browser.msie &&
    parseInt(jQuery.browser.version) == 6) {
        } else {
            $("#sidebar").fadeTo('fast', 0.5);
            $("#maindiv").hover(function() {
                /// The below line is what I just changed, putting the fadeTo() value
                /// to 0.5 causes the divs to fade out to be translucent.
                $("#primarycontainer,#sidebar").stop().fadeTo('fast', 0.5);
            }, function() {
                $("#sidebar").stop().fadeTo('fast', 0.5);
                $("#primarycontainer").stop().fadeTo('fast', 1);
            });

            $("#sidebar").hover(function() {
                $(this).stop().fadeTo('fast', 1);
                $('#primarycontainer').stop().fadeTo('fast', 0.5);
            }, function() {
                $(this).stop().fadeTo('fast', 0.5);
                $('#primarycontainer').stop().fadeTo('fast', 1);
            });
        }
    });

EDIT

Ok, I get the feeling you've miscommunicated your intentions here:

This code will:

Fade #sidebar and #primarycontainer alternately on hover, with the container that is being hovered becoming completely opaque and the div that is not being hovered becoming translucent.
Make #sidebar translucent when nothing is being hovered
Make both #sidebar and #primarycontainer completely opaque when #maindiv is hovered over

if that is not what you're trying to achieve, then alter the question slightly and I'll sort the code to do what you ask. As for #maindiv doing odd behaviour, it's most likely a quirk in your html or css, the jQuery code is sound.

$(document).ready(function(){

    if ($.browser.version = jQuery.browser.msie &&
        parseInt(jQuery.browser.version) == 6) {
    } else {

        // Set up hover behavior for #maindiv
        // When #maindiv is hovered, it will effect both 
        // #primarycontainer & #sidebar

        $("#maindiv").hover(function(){
                $("#primarycontainer,#sidebar").fadeTo('fast', 0.5);
            },function(){
                $("#primarycontainer,#sidebar").fadeTo('fast', 1);
            }
        );

        // Set up hover behaviors for #primarycontainer & #sidebar
        // When either #primarycontainer or #sidebar is hovered
        // it will effect the element which is being hovered

        $("#primarycontainer,#sidebar").hover(function(){
                $(this).fadeTo('fast', 0.5);
            },function(){
                $(this).fadeTo('fast', 1);
            }
        );
    }
});

Not very tricky but works (if I well understand your wish) :

$("#maindiv").hover(function(){
          $("#primarycontainer, #sidebar").stop().fadeTo('fast', 1);
        },function(){

          $("#sidebar").bind('mouseover',function(){
            $(this).stop().fadeTo('fast', 1);
            $("#primarycontainer").stop().fadeTo('fast', 0.5);
          });

          $("#primarycontainer").bind('mouseover',function(){
            $(this).stop().fadeTo('fast', 1);
            $("#sidebar").stop().fadeTo('fast', 0.5);
          });
        });