PixelUlu on "jQuery Mouseover Fade Issue"

June 8, 2010 by David Olsen

Here is a snippet from my header in the <head> section (script.js is where my function is):

<?php wp_enqueue_script("jquery"); ?>
	<?php wp_head(); ?>

	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
	<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
	<?php include_once("colors.php"); ?>
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
	<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />
	<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/script.js"></script>

Here is the code from script.js:

<script type='text/javascript'>
jQuery(document).ready(function($){
	$(".bg").hover(
		function() { $(this).animate({"opacity": "0"}, "slow"); },
		function() { $(this).animate({"opacity": "1"}, "slow"); }
	);
}
</script>

This is how I’m currently using it, however I’ve tried placing it all over when this didn’t work, including trying to put everything in functions.php. I’m new to working with WordPress templates, so it’s very possible I’m missing something simple, but I’m pretty familiar with web programming in general.

Share on Facebook