ansaurus

Question

Answer 1

+1 A:

$(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);
            }
        );
    }
});

jessegavin 2010-02-01 18:12:08

That's pretty close, but what it does is "bounce" between primarycontainer and sidebar when hovering over primarycontainer and then stop altogether. So I'm guessing that there needs to a callback or refresh to get the function to stay active?

songdogtech 2010-02-01 20:02:47

Answer 2

+5 A:

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.

Ed Woodcock 2010-02-04 15:31:49

Closer; this alternately fades sidebar and primarycontainer when hovering, but on maindiv hover, it only fades sidebar, and only when hovering outside the bounds of maindiv....

songdogtech 2010-02-05 03:34:28

Thanks for your help. Going back over all this I've discovered my brain must have been preempted by work, a rather cold Montana winter and learning php and mysql at the same time. What I'd like to do is have is #sidebar and #primarycontainer alternately be translucent when the other is hovered, like they do right now. But it would be great to have both of those be translucent when #maindiv is hovered over, not just #sidebar. So that's clearer in my mind. I've added my CSS above. I wonder if the fact that the divs are in different overall containers will matter?

songdogtech 2010-02-08 04:11:04

No, that HTML should work fine. I'll just switch the code out so they both go translucent when maindiv is hovered, and make a note of where I did that

Ed Woodcock 2010-02-08 09:06:52

Works! Thanks. I'm learning, slowly. I changed the second function to `$("#primarycontainer, #sidebar").stop().fadeTo('fast', 1);` to make both #primarycontainer and #sidebar be translucent on #maindiv hover.

songdogtech 2010-02-10 03:45:46

Answer 3

+1 A:

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);
          });
        });

Alysko 2010-02-08 14:47:53

ansaurus

tags:

views:

answers:

jQuery hover fadeTo with three div's

related questions