frustrating jquery.. easiest thing ever that I'm failing at

Marketcake

Marketcake

God of Leisure
Dec 6, 2009
450
8
0
Paradise
I'm pretty familiar with languages but javascript/jquery is just one thing that fucks me in the ass every time, I have no idea what I'm doing and I never seem to pick it up as I bumblefuck my way through it for some reason, probably because I spend 90% of the time figuring out why the effect doesnt show up period.


All I'm trying to do is take a wordpress menu, and add a fade-in fade-out effect to the background image like this site.. mouse over the menu

Amplify - 5 in 1 Portfolio Theme Preview - ThemeForest


As you know wordpress lists all the pages simply by calling

Code: 
<ul id="nav">
	<?php wp_list_pages('title_li='); ?>
</ul>

However, when it outputs it it is as follows

Code: 
<ul id="nav">
	<li class="page_item page-item-4 current_page_item"><a href="http://xxx.com/travis" title="Home">Home</a></li>
        <li class="page_item page-item-2"><a href="http://xxx.com/travis/about/" title="About Me">About Me</a></li>
        <li class="page_item page-item-6"><a href="http://xxx.com/travis/contact/" title="Contact Me">Contact Me</a></li>
</ul>

Here is the CSS. Basically it shows the tabs with no background, on mouseover there is a blue background image. The current tab always has the image.

Code: 
/* navigation */

#nav {
	width: 550px;
	float: left;
	font-size: 13px;
	margin: 91px 0 0 60px;
}

#nav li {
	float: left;
	margin: 0 4px 0 0;
}

#nav li a {
	display: block;
	padding: 10px 20px;
	
}

#nav li a:hover, #nav li.current_page_item a {
	color: #fff;
	text-decoration: none;
	background: url(../img/bg-nav-hover.png) repeat-x 0 0;
}

I swear though I've tried all sorts of examples and I've googled this fucking shit the last 2 hours, I'm so hating JS right now

Would someone mind helping me write the 2 seconds of script that will allow me to do this? i can paypal you 5 bux or something

Thanks :)
 


Not tested but this should be along the right line..

Take the background part out of the css though.

Code: 
<script type="text/javascript">
$(document).ready(function(){
	$("ul#nav li a").hover(function(){
		$(this).animate({"background":"url(../img/bg-nav-hover.png) repeat-x 0 0"}, 500);
	},function(){
   		$(this).animate({"background":"url(../img/bg-nav-hover.png) repeat-x 0 0"}, 500);
	});
});
</script>

I'm not 100% sure this is the most efficient way to do it ir if you can fade images in this way, couldn't find a small enough image to test it with so tried a larger remote image.
 
that just made them pop in after a faded delay.. and they wont disappear when the mouse leaves.

at least the code is showing OSMETHING which is farther than i usually get :p how do i make it fade instead of appear instantly?
 
Well the problem with the code I did is that it doesn't seem to be able to fade images but just solid background colours.

If you could put another container inside the a then you could set the background image as that container and then use opacity when hover over which would work.

I've never used wordpress though so not sure how complicated that would be to change.

Otherwise I'm stumped.
 
It'd take me a little while to put together a way to do what that's doing. But take a look at this page:

Using jQuery for Background Image Animations - Snook.ca

Look at his examples where he uses a gradient for the background and then moves the background on mouseenter / mouseleave.

Bottom two examples:
jQuery Background Test

Different from what you're using but a nifty animated effect.

Here's a thought. What if the blue background was the "real" background, and the background color of the link was set. Then you could use animate and animate the background color of the link on mouseenter from that ugly grey-brown to transparent and back again on mouseleave?
 
You must log in or register to reply here.
Top Bottom