Hover fadeIn; jQuery

**vbsXperts** · 04-01-2012, 07:45 AM

Hey guys,

I have a problem making my website. I have this logo, and on hovering I want it to glow.
Now I have two images logo.png and logoGlow.png and on hovering I want to fadein logoGlow.png.

Now I have this:

<head>

HTML Code:

<script>
$(function() {
			$(".logo")
			.find("span")
			.hide()
			.end()
			.hover(function() {
				$(this).find("span").stop(true, true).fadeIn();
			}, function() {
				$(this).find("span").stop(true, true).fadeOut();
			});
		});
</script>

<body>

HTML Code:

<a href="index.html" class="logo">Arrow<span></span></a>

CSS

Code:

.logo {
margin-top: 30px;
display:inline-block;
position:relative;
text-indent: -9999px;
width: 463px;
height: 178px;
background: url(logo.png) no-repeat;
}
.logo span {
position:absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(logoGlow.png) no-repeat;
}

But it's not working. Can you guys help me?

**Padonak** · 04-01-2012, 11:44 AM

i created a page with your code and took 2 equal images with the marks 'logo' and 'logoGlow' on them. everything works as it seems... what exactly was the problem?

**vbsXperts** · 04-01-2012, 04:16 PM

Originally Posted by Padonak

i created a page with your code and took 2 equal images with the marks 'logo' and 'logoGlow' on them. everything works as it seems... what exactly was the problem?

Well, on hovering the image I want to fade in the logoGlow image (wich is different than the logo.png!). But what it does is it just puts the logoGlow.png image on top doesn't hide it and when I hover it also nothing happens. Is it possible that it won't work because I have not put this online yet (so I just open the file index.html on my computer)?

EDIT:
So on hovering the logo, I just want logoGlow to fade in, and when leaving the image I want logoGlow to fade out. Did that work when you tried it?

EDIT2:
I put all the content online: http://adlivro.net84.net/index.html It still doesn't work :S

Thread: Hover fadeIn; jQuery

Thread Tools

Display

Hover fadeIn; jQuery

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions