All geek questions in one place

JQuery hover fadeTo with three divs

I am using this fadeTo div code from here , which freezes in one of the two divs, depending on the hang.

What I would like to do is add a third option - and a third div called #maindiv, as follows: "If you hover over #maindiv, do not fade either #sidebar or #primarycontainter, but if it hangs #sidebar or #primarycontainter , then fade out any of them (depending on the hover), but don't disappear #maindiv. "

How can I do this (with a different expression?) While preserving an existing else statement that prevents IE6 from using any code? Thanks....

Edit 2/3/10: Is there any other way to handle this due to three divs? Is a callback required or some way to update the function, since the code below leads to an incompatible 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").stop().fadeTo('fast', 1); } ); } });

Edit 2/09/10:

Ed Woodcock answers below, works with small changes (of my choice) in my comments on his answer.

This is CSS:

 <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>
+4
source share
3 answers

This should do the trick, it is hardly elegant, but it should not be difficult to perfect 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

Well, I have a feeling that you immediately violated your intentions:

This code will be:

  • Fade #sidebar and #primarycontainer hover one by one when the container that hangs becomes completely opaque and the div that does not float becomes translucent.
  • Make #sidebar translucent when nothing hangs
  • Make #sidebar and #primarycontainer completely opaque when #maindiv hangs over

If this is not what you are trying to achieve, then slightly modify the question and I will sort the code to do what you ask. As for #maindiv performing odd behavior, this is most likely a fad in your html or css jQuery code sounds.

+5
source 
 $(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); } ); } });
+1
source

Not very difficult, but it works (if I understand your desire well):

 $("#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); }); });
+1
source

Source: https://habr.com/ru/post/1299971/

More articles:


All Articles