jQuery Mouseover Fade Issue

  • Resolved j_mo

    (@j_mo)


    14 years, 6 months ago

    Hi,

    I have followed and tried to translate a tutorial regarding a jQuery image rollover which I want to use on my post thumbnails. Whilst I get it working from a basic HTML doc, when I try applying it in WordPress I cannot.

    Here is the link to the tutorial

    I call the jQuery in my Header.php file:

    <script type='text/javascript' src='https://iamphiljames.co.uk/test/jquery.js'></script>
<script type='text/javascript'>
jQuery(document).ready(function(){

jQuery("img.a").hover(
function() {
jQuery(this).animate({"opacity": "0"}, "slow");
},
function() {
jQuery(this).animate({"opacity": "1"}, "slow");
});

});
</script>

    Then in my index.php I have two thumbnails:

    <div class="pre_post" id="post-<?php the_ID(); ?>"><div class="fadehover">
<?php $postimageurl = get_post_meta($post->ID, 'Thumbnail', true);
if ($postimageurl) {
?>
     <a  href="<?php the_permalink(); ?>" rel="bookmark"><img src="<?php echo $postimageurl; ?>" alt="Post Pic" width="239" height="150" class="a"/></a>
<?php } ?>

<?php $postimageurl = get_post_meta($post->ID, 'Thumbnail1', true);
if ($postimageurl) {
?>
     <a  href="<?php the_permalink(); ?>" rel="bookmark"><img src="<?php echo $postimageurl; ?>" alt="Post Pic" width="239" height="150" class="b"/></a>
<?php } ?>

</div></div>

    I have applied the CSS also:

    .fadehover {
position: relative;
}

img.a {
        z-index: 1000;
	}

img.b {
	position: absolute;
	left: 0;
	top: 0;
z-index: -10;
	}

    I am unsure what is wrong and whether I have called the jQuery correctly. Can someone please help?

    Phil

Viewing 10 replies - 1 through 10 (of 10 total)

  • Replace the jQuery functions with this version and see if it helps.

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

    NOTE: You shouldn’t need jQuery 1.4.2 for the above, the WP version should work fine if you want to include it instead..

    Thread Starter j_mo

    (@j_mo)

    Thanks for you help but I managed to sort it…was in the wrong place!! :/

    I’m having a similar problem but changing the place of my code isn’t fixing anything. I’ve tried multiple ways to import jQuery, tried various code snippets to fade a div upon hover (including the one used in this thread) to no avail. Am I missing something?

    Well let’s see your code and how you’re using it.. ??

    Would also help to know where you’re including the code..

    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.

    You can enqueue your script like this, and setup jquery as a dependancy..

    wp_enqueue_script( 'some_script', get_bloginfo('stylesheet_directory').'/script.js', array( 'jquery' ) );

    Also your JS file i believe should not include..

    <script type='text/javascript'>

    and

    </script>

    Remove them, and see if it helps.

    Nothing. Hmm. I hate it when something that should be so simple is so difficult.

    The script includes fine, the error is with your jQuery..

    Update your script to..

    jQuery(document).ready(function($){
	$(".bg").hover(
		function() { $(this).animate({"opacity": "0"}, "slow"); },
		function() { $(this).animate({"opacity": "1"}, "slow"); }
	);
});

    Notice the previously missing end right bracket and semi colon… ??

    That’s it! Phew, finally. Thank you sir, that little problem completely escaped me ??

    You’re welcome.. ??

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘jQuery Mouseover Fade Issue’ is closed to new replies.