• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 504
  • Last Modified:

adding mouseover fadeIn/fadeOut to buttons

I am trying to learn jQuery, so please understand I'm a beginner.

I want to do a simple fadeIn/fadeOut effect to my navigation buttons. I'm not sure if conceptually I am doing this 100% correct, and then I am also having some difficulties with programming.

My idea was to have buttons displayed in an element which is positioned absolutely, z-index:1. Then have the mouseover buttons positioned in the same way, z-index:2 and with visibility:hidden. Then when there is a mouseover event, fadeIn the hidden button, and on mouseout fadeOut the button.

My first difficulty is that the hidden buttons seem to be interfering with the buttons that are linked underneath. So you can see the buttons underneath but the links don't work completely. You can see that here:

http://secure.bbdesign.com/lighthousechristiancenter

I say "don't work completely" because the odd thing is that if you run the cursor over the buttons in some spots they actually DO link, but in most spots not. Common sense tells me they should either work or not work, so I'm confused by that.

My jQuery code is attached, very simple but not sure it is right. The mouseover buttons simply have a class of navbutton, so I'm trying to select anything with that class, and then apply the hover function to it.

Again, I understand that the solution to this may not be fixing what I've already done, but perhaps there is a better way of doing these types of mouseovers?

Would really appreciate any help. Thank you!
$(function(){
		$('.navbutton').hover(function(){
			$(this).fadeIn();
		}, function(){
			$(this).fadeOut();
		});
	});

Open in new window

0
bbdesign
Asked:
bbdesign
  • 2
  • 2
1 Solution
 
JF0Commented:
Here is an example of what I think you are trying to do.

http://imgur.com/JX2yDl&8VucZ
http://imgur.com/JX2yD&8VucZl

<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>

		<title> Animated Button </title>

		<meta name="Author" content="" />
		<meta name="Keywords" content="" />
		<meta name="Description" content="" />

		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<meta http-equiv="Content-Style-Type" content="text/css" />

		<link href="styles.css" rel="stylesheet" type="text/css" />
		
		<script type="text/javascript" src="jquery-1.4.min.js"></script>
		<script type="text/javascript">
		$(document).ready(function(){
		  $('p.cta-button a')
			.css({  'backgroundPosition': '0 0' })
			.hover(
			  function(){
				$(this)
				  .stop()
				  .animate({
					'opacity': 0
				  }, 325);
			  },
			  function(){
				$(this)
				  .stop()
				  .animate({
					'opacity': 1
				  }, 325);
			  }
			);
		  $('p.rss-button a')
			.css({  'backgroundPosition': '0 0' })
			.hover(
			  function(){
				$(this)
				  .stop()
				  .animate({
					'opacity': 0
				  }, 325);
			  },
			  function(){
				$(this)
				  .stop()
				  .animate({
					'opacity': 1
				  }, 325);
			  }
			);
		});
		</script>


	</head>

	<body>

		<div id="body">
			<p class="cta-button"><a href="#">Sign Up</a></p>
			<br />
			<p class="rss-button"><a href="#">RSS Feed</a></p>
		</div>



	</body>
</html>

Open in new window

0
 
bbdesignAuthor Commented:
That method requires a separate function for every button on the page, though. There must be a more generic way of doing this.
0
 
JF0Commented:
Good point. I too was just learning jquery when I made that. How about this?
<script type="text/javascript">
		$(document).ready(function(){
		  $('p.animate a')
			.css({  'backgroundPosition': '0 0' })
			.hover(
			  function(){
				$(this)
				  .stop()
				  .animate({
					'opacity': 0
				  }, 325);
			  },
			  function(){
				$(this)
				  .stop()
				  .animate({
					'opacity': 1
				  }, 325);
			  }
			);
		});
		</script>


	</head>

	<body>

		<div id="body">
			<p class="cta-button animate"><a href="#">Sign Up</a></p>
			<br />
			<p class="rss-button animate"><a href="#">RSS Feed</a></p>
		</div>

Open in new window

0
 
bbdesignAuthor Commented:
Hey, I got it to work! By modifying your original. Code I used is attached. Your idea of using opacity instead of either visibility or display fixed the problem. Thanks!
$(function(){
		$('.navbutton').hover(function(){
			$(this).stop().animate({'opacity':100}, 2000);
		}, function(){
			$(this).stop().animate({'opacity':0}, 300);
		});
	});

Open in new window

0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now