How to animate the application of a class to a div

Question

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.

score 2 · Answer 1 · answered Apr 22 '11 at 19:12

2

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/

answered Apr 22 '11 at 19:12

Naveed Ahmad

3,176
1
15
18

PS> Please note that some features won't work on different browsers. Like `opacity` property is not supported in IE. But just wanted to give you an idea. hope that helps. – Naveed Ahmad Apr 22 '11 at 19:13
That fades out the entire HTML content. I'm just trying to fade out the yellow highlight. – CaptSaltyJack Apr 22 '11 at 19:15
Basically this question has already been answered: http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor – Naveed Ahmad Apr 22 '11 at 19:19
By adding jQuery UI I've achieved what you wanted. The updated jsfiddle: http://jsfiddle.net/naveed_ahmad/PzUdA/6/ – Naveed Ahmad Apr 22 '11 at 19:22

Code Maverick · Accepted Answer · 2014-03-14T15:54:18.503

1

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);

});

edited Mar 14 '14 at 15:54

answered Apr 22 '11 at 19:14

Code Maverick

20,171
12
62
114

This works too. I'm choosing this as the official answer because the code is cleaner. Except I'd use removeClass instead of toggleClass. – CaptSaltyJack Apr 22 '11 at 19:45
I modified my jsFiddle to be a little playground for you on deciding what values you want to go with on fade in or fade out. Enjoy. – Code Maverick Apr 22 '11 at 20:02

score 1 · Answer 3 · answered Apr 22 '11 at 19:22

1

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.

answered Apr 22 '11 at 19:22

melhosseiny

9,992
6
31
48

Nice! This works, and I feel removeClass() is cleaner than toggleClass(). I did condense your code a bit though: http://jsfiddle.net/csaltyj/PzUdA/10/ – CaptSaltyJack Apr 22 '11 at 19:42
@CaptSaltyJack Note that this condensed code animates only the removal of the class. – melhosseiny Apr 22 '11 at 19:49

How to animate the application of a class to a div

3 Answers3