CSS apply a class "on click"

Question

I'd like the class "animated fadeOutDown" to be applied to mydiv "#article" when users click on .article-close.

I tried the below but without success. Your help would be welcome.

Many thanks.

<script>
$(".article-close").click(function() {
  $("#article").css("animated fadeOutDown");
});
</script>

Did you type your question title into Google before asking it? — dsgriffin, Jun 08 '13 at 13:39
Actually incredible our dear Goog did not yield you and results `:)` — Roko C. Buljan, Jun 08 '13 at 13:40
What jquery version are using? try this `$(".article-close").on('click', function() {` or `$(document).on('click', '.article-close', function() {` — Omar, Jun 08 '13 at 13:41
First link on google, searching for the exact title (copy-pasted): http://css-tricks.com/forums/discussion/11841/add-a-class-on-click-event/p1 . So I think the OP did not google it. @Zenith — 11684, Jun 08 '13 at 13:43

score 3 · Answer 1 · edited Jun 08 '13 at 13:45

3

Your syntax is wrong.You have to use addClass().

$(".article-close").click(function() {
  $("#article").addClass("animated fadeOutDown");
});

The css() method is used to set or return one or more style properties for the selected elements.

edited Jun 08 '13 at 13:45

Joe

15,205
8
49
56

answered Jun 08 '13 at 13:38

Suresh Atta

120,458
37
198
307

Roko C. Buljan · Accepted Answer · 2013-06-08T13:59:31.957

$(".article-close").click(function() {
  $("#article").addClass("animated fadeOutDown");
});

http://api.jquery.com/addClass/
Actually spend more time here: http://api.jquery.com and learn them all! will be useful at any time, you don't need to know exactly every method or selector, but at least you'll know what you can do with jQuery and you can always go back to the API for what you need.
Also you can find very useful jQuery cheatSheets on Goog, print those pages and attach on the wall :)

I like this one: http://oscarotero.com/jquery/ but there are some with a short explanation.

CSS apply a class "on click"

2 Answers2