I'm using jquery to create a nice animated hover effect on a set of links. When a mouse hovers over a link it fades out a main div (#content) and fades in another (depending which link is hovered on). On mouseout the 'new' div fades out and the original (#content) fades back in again. What I need is a way to make the #content fade in/out conditional. I suppose I need to add a clause that states something like "Fade the #content div in IF it's alpha is zero, else do nothing? Likeswise, fade the #content div out IF the alpha is 100%? Anybody got any ideas on how to achieve this?
Here's my current code:
Code:
/* Hides the link floating divs */
jQuery(document).ready(function() {
jQuery('#sideNav #subText1').hide();
jQuery('#sideNav #subText2').hide();
jQuery('#sideNav #subText3').hide();
});
/* Fades in the hidden floating divs */
$(document).ready(function(){
$("#sideNav li #trigger1").mouseover(function(){
$("#sideNav #subText1").fadeIn(200);
});
$("#sideNav li #trigger2").mouseover(function(){
$("#sideNav #subText2").fadeIn(200);
});
$("#sideNav li #trigger3").mouseover(function(){
$("#sideNav #subText3").fadeIn(200);
});
/* Fades out the floating divs */
$("#sideNav li a").mouseout(function(){
$("#sideNav .pop-up").fadeOut(100);
});
});
/* Fades out the main content div (or fades it in) */
jQuery(document).ready(function() {
jQuery('.trigger').hover(function() {
jQuery('#content').fadeOut(100);
},
function() {
jQuery('#content').fadeIn(100);
});
});
OK, I've worked out how to do this but now realise that it doesn't achieve the effect I need!
This is a hard one to explain but I'll try.
[dead url removed]
What I'd like is for the three 'links' on the left to fade out the main text and fade in a new div on rollover, then fade the new div out and the original back in again on mouseout. This works to a point but is a bit messy because if you move the cursor over the links quickly it doesn't always fade the 'main' text back in again. I'm happy with the way the new divs appear, it's just controlling the fadeOut/fadeIn of the main centre text (the text that first appears in the page).
Does that make sense? Does anybody have any ideas?!
Last edited by TheBearMay; 05-13-2012 at 08:21 PM.
So most of my code was redundant then? People like you make it look so easy (but it isn't), and I really appreciate the time you've spent on this for me.
I love the way this works... almost Flash-like which is what I was trying to achieve.
Bookmarks