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);
});
});
加载中,请稍侯......
精彩评论