Forums

GreyFox135

Hi everyone, I'm having a great time learning jQuery. I love it!

Now to the issue: I'm working on my blogs redesign. If you go here http://redeyedesigner.com/dev/red/ you'll notice my navigation has a description below each link. As soon as the page loads the text fades out. Then when you hover over the link it fades back in and out as soon as you mouse out.

What I'd like to do is have the sub text not show up until I hover over the corresponding link. As of now, the sub text loads up then fades away. I tried adding an opacity rule of zero and it worked on every browser except IE 7 (of course). Is there a way I can get this to work in IE 7?

Here's my code for the animate action:


$(document).ready(function(){
	$('#nav span').animate({ \"opacity\" : 0 });
	
	$('#services').hover(function() {
		$('#nav span.sub1').stop().animate({ \"opacity\" : 1 });
	},function() {
		$('#nav span.sub1').stop().animate({ \"opacity\" : 0 });
	});
	
	$('#portfolio').hover(function() {
		$('#nav span.sub2').stop().animate({ \"opacity\" : 1 });
	},function() {
		$('#nav span.sub2').stop().animate({ \"opacity\" : 0 });
	});
	
	$('#nav-about').hover(function() {
		$('#nav span.sub3').stop().animate({ \"opacity\" : 1 });
	},function() {
		$('#nav span.sub3').stop().animate({ \"opacity\" : 0 });
	});
	
	$('#contact').hover(function() {
		$('#nav span.sub4').stop().animate({ \"opacity\" : 1 });
	},function() {
		$('#nav span.sub4').stop().animate({ \"opacity\" : 0 });
	});
});

Can anyone help?

von

I believe if you specify timing it might fix things. Add ", 0" after you animate selector.


$(document).ready(function(){
    $('#nav span').animate({ \"opacity\" : 0 }, 0);

It tells the animate to occur immediately instead of whatever the default timing is. It seemed to fix my little test I built to reproduce the behavior, but I didn't have any other scripts on the page, so it might still be something else on your page that is hosing things up.

Hugo

Why not give the descriptions a CSS class that makes them invisible immediately? As far as I know CSS comes before Javascript.. So try using visibility: hidden

GreyFox135

"von" said:
I believe if you specify timing it might fix things. Add ", 0" after you animate selector.
$(document).ready(function(){
    $('#nav span').animate({ \"opacity\" : 0 }, 0);
It tells the animate to occur immediately instead of whatever the default timing is. It seemed to fix my little test I built to reproduce the behavior, but I didn't have any other scripts on the page, so it might still be something else on your page that is hosing things up.

Now instead if it fading away it just turns off like a light bulb. I wish it just never displays when the pages loads.

GreyFox135

"Hugo" said:
Why not give the descriptions a CSS class that makes them invisible immediately? As far as I know CSS comes before Javascript.. So try using visibility: hidden

seemed like a good idea, but visibility didn't work. jQuery couldn't animate it...weird...

von

It sounds like something else is running before your opacity event when the page loads. If you have various $(document).ready(function(){... calls in multiple scripts could one of them could slow down the execution of another?

treehouse : what would you like to learn today?

Forums

jQuery opacity help