CODEWITHSUNDEEP
jquerydelayaddclassremoveclass
user918522
user918522

Reputation:

jQuery: delay / setTimeOut for addClass and removeClass

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!

Upvotes: 0

Views: 2491

Answers (2)

Don Boots
Don Boots

Reputation: 2166

Your CSS implementation is a little off, but with a slight modification to your jQuery, this might be what you were looking for?

http://jsfiddle.net/dboots/6zDhE/

$(function () {
    //-- init link span opacity to 0
    $("#fb span, #yt span, #tw span, #sc span, #it span, #my span").css({
        opacity: "0"
    });

    //-- add mouseover/mouseout event handler to the span parents
    $('#fb, #yt, #tw, #sc, #it, #my').mouseover(function () {

        //-- find the current span element we are working with.
        var el = $(this).find('span');

        el.stop().animate({
            opacity: "1"
        }, {
            duration: 250
        })
        el.parent().addClass("nobg");
    }).mouseout(function () {
        var el = $(this).find('span');
        el.stop().animate({
            opacity: "0"
        }, {
            duration: 250
        })
        el.parent().addClass("nobg");
    })
});​

In regards to your CSS being a little off, it would be a little easier to maintain if you added classes to your parent divs and referenced them that way.

For example:

http://jsfiddle.net/dboots/6zDhE/1/

HTML:

<ul>
    <li><a href="#" target="_blank"><div class="social_link" id="fb">Facebook<span>1</span></div></a></li>
    <li><a href="#" target="_blank"><div class="social_link" id="yt">YouTube<span>2</span></div></a></li>
    <li><a href="#" target="_blank"><div class="social_link" id="tw">Twitter<span>3</span></div></a></li>
    <li><a href="#" target="_blank"><div class="social_link" id="my">myspace<span>4</span></div></a></li>
    <li><a href="#" target="_blank"><div class="social_link" id="sc">Soundcloud<span></span></div></a></li>
    <li><a href="#" target="_blank"><div class="social_link" id="it">iTunes<span></span></div></a></li>
</ul>​

JS:

$(function () {
    //-- This should probably be accomplished via CSS instead?
    //-- ex.) .social_link span { display: none; }

    $('.social_link span').css({
        opacity: "0"
    });

    $('.social_link').mouseover(function () {
        var el = $(this).find('span');
        el.stop().animate({
            opacity: "1"
        }, {
            duration: 250
        })
        el.parent().addClass("nobg");
    }).mouseout(function () {
        var el = $(this).find('span');
        el.stop().animate({
            opacity: "0"
        }, {
            duration: 250
        })
        el.parent().addClass("nobg");
    })
});​

Upvotes: 0

adeneo
adeneo

Reputation: 318182

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");
                });
            }
    });
});​

Upvotes: 1

Related Questions