The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #36445

    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() {
    .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.



    I’m only just starting to learn JS and jQuery myself, but this is how I would do it:


    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…


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


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



    .custom {
    overflow: hidden;

    .custom img.fadein {


    $(document).ready(function() {
    $(".custom").hover(function() {
    }, function() {
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.