Fade Image Into Another (within a Sprite)…. Something isnt working properly…

[bdek]

So I am working on a menu bar for a site adn trying to make the menu buttons fade in with the easiest solution possible. I found on here about how to do it with an image sprite and also using spans.

Here is my current HTML:

The matching CSS:

.custom {

display: inline-block;

position: relative;

text-indent: -9999px;

width: 132px;

height: 50px;

background: url(images/custompcs.png) no-repeat;

}

.custom span {

position: absolute;

top: 0; left: 0; bottom: 0; right: 0;

background: url(images/custompcs.png) no-repeat;

background-position: -132px 0;

}

and the Jquery:

$(function() {

$(".custom")

.find("span")

.hide()

.end()

.hover(function() {

$(this).find("span").stop(true, true).fadeIn();

}, function() {

$(this).find("span").stop(true, true).fadeOut();

});

});

If you have any insight that would be greatly appreciated.

Also, when looking at it on the site, it is showing the image that is supposed to only show when hovered over, but if I disable that one, then I see the other image, so its ass if the java isnt working to make the second image hover over and be at 0 opacity.

I am pretty new to java still, but am trying to learn more, so thank you in advanced.

BD

[joshuanhibbert]

I’m only just starting to learn JS and jQuery myself, but this is how I would do it: http://jsfiddle.net/joshnh/rkWks/

[bdek]

hey thanks for the help! I tried your method and it seems that the java isnt attached for some reason…? Like it loads the images, but wont do the transition, like the java isnt working…

[joshuanhibbert]

Hmm, strange. It’s working fine for me. Try copying the code out into your editor and see if it works for you.

[bdek]

well i got it working another way, and this is how i did it…

HTML:

CSS:

.custom {

position:relative;

overflow: hidden;

}



.custom img.fadein {

position:absolute;

}

Javascript:

$(document).ready(function() {

$(".custom").hover(function() {

$(this).children("img.fadein").fadeOut();

}, function() {

$(this).children("img.fadein").fadeIn();

});

});

[Author]

Posts