jQuery Fade In/Out Effect

[psionicsin]

I'm having trouble integrating a jQuery fade in/out effect to the facebook, twitter and rss buttons of my site. I got it working (somewhat), but the animation seems very choppy, and the position of the buttons are changing slightly upon hover.Can anyone take a quick look for me and tell me what I'm doing wrong.Here's my site : http://rutholsonphoto.com/testbuild/index.phpAnd here's the tutorial I was following: http://www.hv-designs.co.uk/2010/01/13/lea...and-out-effect/

[dsonesuk]

this is simple, and cheaper.

	$(function() {	// OPACITY OF BUTTON SET TO 50%	$("#snetwork a").css("opacity","0.5");	 // ON MOUSE OVER	$("#snetwork a").hover(function () { // SET OPACITY TO 100%	$(this).stop().animate({	opacity: 1.0	}, "slow");	},	// ON MOUSE OUT	function () {	 	// SET OPACITY BACK TO 50%	$(this).stop().animate({	opacity: 0.5	}, "slow");	});	});

[psionicsin]

Ok I was working with Chrome and NetBeans all day long at work making adjustments and so forth to the site.I got home, launched up Chrome, opened up the link to the test site...and my java isn't working, and my links are purple. I have no clue what's going on with my version of Chrome, compared to the one at work. Funny thing is...it works fine in both FF and IE.Correction: NOTHING is working in Chrome, the Fade In/Out effect is broken in FF, and IE is just fine. That is HIGHLY weird.

[dsonesuk]

Someones been changing the id and class names to lowercase, and not doing the same for css, javascript/jquery reference to these id ans classes, TUT, TUT.

[psionicsin]

Someones been changing the id and class names to lowercase, and not doing the same for css, javascript/jquery reference to these id ans classes, TUT, TUT.

I'm looking...and I did change all of the cases when I changed the ones in the php file. So everything SHOULD be matching.

[dsonesuk]

css and javscript/jquery are case sensitiveyour html classes currently read <div id="navcontainer"> <ul id="navmenu"> <li><a href="#" class="normalmenu">Home</a></li> <li><a href="#" class="normalmenu">At A Glance</a></li> <li><a href="#" class="normalmenu">About Us</a></li> <li><a href="#" class="normalmenu">Gallery</a></li> <li><a href="#" class="normalmenu">Senior Challenge</a></li> <li><a href="#" class="normalmenu">Prices</a></li> <li><a href="#" class="normalmenu">Contact Us</a></li> <li><a href="#" class="normalmenu">Log-In</a></li> </ul> </div> </div>currently your css styling is looking for/* styling the links */.normalMenu, .normalMenu:visited,.hoverMenu, .hoverMenu:visited,.selectedMenu,.selectedMenu:visited {/* these properties are shared between the classes */ outline:none; padding:0px 5px; display:block;}.normalMenu, .normalMenu:visited { color:white; font-weight: bold; background:url(images/dark_bg.gif) repeat-x #444444;}currently your javscript/jquery is looking for/*<![CDATA[*//*---->*/ THIS IS NOT REQUIRED AND SHOULD BE REMOVED!$(document).ready(function(){// executed after the page has finished loading $('#navMenu li .normalMenu').each(function(){ // for each menu item // create a duplicate hyperlink and position it above the current one $(this).before($(this).clone().removeClass().addClass('hoverMenu')); }); $('#navMenu li').hover(function(){ // using the hover method.. // we assign an action on mouse over $(this).find('.hoverMenu').stop().animate({marginTop:'0px'},150); // the animate method provides countless possibilities }, function(){ // and an action on mouse out $(this).find('.hoverMenu').stop().animate({marginTop:'-29px'},150); });});none of these is going to work unless they match

[psionicsin]

css and javscript/jquery are case sensitive

That's EXTREMELY odd because On NetBeans it's all lowercased...Let me do a physical download and check.

[psionicsin]

Ok I just went into FileZilla, downloaded the files, and viewed them in both Dreamweaver and Notepad++...everything is how I said, lowercased.I have no idea why you're seeing an uppercased "Menu", nor why Chrome and FF aren't displaying correctly yet IE is (which is the pickiest of all browsers).

[psionicsin]

Ok. I dunno what happened. I haven't uploaded ANYTHING. I hard refreshed FF and Chrome 7-10 times each (ctrl+F5) and then everything finally worked. That was very very weird. What do you think happened? Server hiccup?

[dsonesuk]

Want to hear something weirder, checked javascript, css in ie and they are lowercase, but FF still shows mixed case?? I think it maybe down to i have 2 versions of FF, which i installed recently, and i think one is reading the others cache, when it should be reading from its own, could explain a few issues when you said you already change some css styling, but i may have still been picking up the old instead.

What do you think happened? Server hiccup?

do you clear cache IE, private data FF, our history in chrome before refreshing page?

[dsonesuk]

just checked everything is fine now, don't if it was because i cleared cache from both versions of FF, or some other problem, but seems strange you were seeing the same thing but from different browsers? maybe css god getting own back for using po... you know.

[psionicsin]

just checked everything is fine now, don't if it was because i cleared cache from both versions of FF, or some other problem, but seems strange you were seeing the same thing but from different browsers? maybe css god getting own back for using po... you know.

Maybe. *I'm so sorry CSS-GOD. I'll never use po****** again!*Quick thing, not js related anymore, but would you happen to know why I had to margin-left: -1px; my rss.png icon in order to make it line up with the image underneath? Even when you first gave me that revised code to follow, there was a small 1px gap between rss and twitter that I just could not figure out where it came form.

[dsonesuk]

Right! after extensive investigation, i have concluded that the display block anchors are of exactly the same width of 37px, whereas the twitter image is 36px in width, the background image is pos... (that word) to the top and left edge of the anchor, thus although empty, it would have a extra 1px in width for the twitter icon, forcing the rss icon 1px to the right, and therefore using margin-left -1px for the rss icon would correct this discrepancy.