CODEWITHSUNDEEP
jquerycssanimation
CaptSaltyJack
CaptSaltyJack

Reputation: 16035

How to animate the application of a class to a div

I'm wondering how exactly to apply a style to a div, and then remove it slowly via animation? Check out the fiddle link here, this obviously doesn't work, but how would I fix it so it does?

http://jsfiddle.net/csaltyj/PzUdA/

EDIT: sorry, meant fade the background out, not the div itself.

Upvotes: 1

Views: 84

Answers (3)

Code Maverick
Code Maverick

Reputation: 20415

Or you can simply remove the .animate() and replace with:

.fadeOut("slow");

EDIT based on your comments that you want to just remove the class and not content:

Simply include jQueryUI and use .toggleClass() as is reflected in this working jsFiddle demo.

jQuery:

$('#press-me').click(function() {

    $('<p>New content.</p>')
        .appendTo('#content-box')
        .addClass('newobj-hilite')
        .toggleClass('newobj-hilite', 2000);

});

Upvotes: 1

melhosseiny
melhosseiny

Reputation: 10144

You can use jQuery UI for that.

$('#press-me').click(function() {
    $('<p class="effect">New content.</p>').appendTo('#content-box')
        .addClass('newobj-hilite', 1000, callback)
});

function callback() {
    $(".effect").removeClass("newobj-hilite", 1000);
}

See updated fiddle.

Upvotes: 1

Naveed Ahmad
Naveed Ahmad

Reputation: 3175

You can do like this:

$('#press-me').click(function() {
    $('<p>New content.</p>').appendTo('#content-box').addClass('newobj-hilite').animate({opacity: '0'}, 500);
});

Jsfiddle: http://jsfiddle.net/naveed_ahmad/PzUdA/2/

Also some good stuff to read and learn:

http://webdesignledger.com/tutorials/13-excellent-jquery-animation-techniques

http://designreviver.com/tutorials/20-easy-to-learn-jquery-animation-tutorials/

Upvotes: 2

Related Questions