CODEWITHSUNDEEP
jquery
Marty Wallace
Marty Wallace

Reputation: 35734

jquery fadein addClass

I am using jQuery to apply a class to an element on hover i.e. addClass('active')

The class adds a border and changes the background color but i would like to have these changes faded in as opposed to just on or off.

Is this possible using jQuery i.e. to add a class and have the effects that the class adds to be faded in?

Upvotes: 0

Views: 513

Answers (3)

netdjw
netdjw

Reputation: 6007

Maybe one good solution if the .animate() function is not good for you ('cause you have image background or something).

Create a div element with same content and new class. Position the new div over your element, and fade in it.

Upvotes: 0

Dylan Cross
Dylan Cross

Reputation: 5986

Try using jQuery UI .addClass and .removeClass.

$(function() {
    $("div.className").hover(function() {
        $(this).stop(true,true).addClass("active", 500);
    }, function() {
        $(this).stop(true,true).removeClass("active", 100);
    });    
});

You can also use .animate to get the desired effect. See below,

note you will need jQueryUI for this to work.

$(function() {
    $("div.className").hover(function() {
        $(this).stop().animate({
            backgroundColor: "#a7bf51"
        }, 800);
    }, function() {
        $(this).stop().animate({
            backgroundColor: "#FFFFFF"
        }, 800);
    });

});

Upvotes: 2

leopic
leopic

Reputation: 3002

If you use jQueryUI this will be built in http://api.jqueryui.com/addClass/ if not, what I would do is extract all the attributes from the class and animate them one by one.

Upvotes: 0

Related Questions