Question

I’m using the following function to control a rollover effect for some social networking icons. The bulk of the function (excluding the addClass / removeClass portion) works perfectly, but I need to include the addClass / removeClass portion as default icon state bleeds in to the hover state around the edges of the icons. The problem I’ve run in to is I can’t quite figure out how to delay the addClass / removeClass portion of the function properly and could use some help doing so. I need to be able to slow that portion of the function by roughly the same amount as the primary part of the function.

$(function () {
    $("#fb span, #yt span, #tw span, #sc span, #it span, #my span").css({
        opacity: "0"
    }).mouseover(function () {
        $(this).stop().animate({
            opacity: "1"
        }, {
            duration: 250
        })
        $(this).parent().addClass("nobg");
    }).mouseout(function () {
        $(this).stop().animate({
            opacity: "0"
        }, {
            duration: 250
        })
        $(this).parent().addClass("nobg");
    })
});

For your reference, the HTML I’m using for this looks like:

<ul>
    <li><a href="#" target="_blank"><div id="fb">Facebook<span></span></div></a></li>
    <li><a href="#" target="_blank"><div id="yt">YouTube<span></span></div></a></li>
    <li><a href="#" target="_blank"><div id="tw">Twitter<span></span></div></a></li>
    <li><a href="#" target="_blank"><div id="my">myspace<span></span></div></a></li>
    <li><a href="#" target="_blank"><div id="sc">Soundcloud<span></span></div></a></li>
    <li><a href="#" target="blank"><div id="it">iTunes<span></span></div></a></li>
</ul>

Thanks in advance for any help you can provide!

Answer 1

jQuery animate() has a callback function, and using it will delay the adding of classes until after the animation has completed. On the other hand, why are you adding the same class twice ?

$(function () {
    $("#fb span, #yt span, #tw span, #sc span, #it span, #my span")
        .css('opacity', '0')
        .on({
            mouseenter: function () {
                $(this).stop().animate({opacity: 1}, 250, function() {
                    $(this).parent().addClass("nobg");
                });
            },
            mouseleave: function () {
                $(this).stop().animate({opacity: 0}, 250, function() {
                    $(this).parent().addClass("nobg");
                });
            }
    });
});​