Toggle animation or Css

Question

How can I toggle an animation or css change? For example I wanted a button that when pressed changes the font size then when pressed again it will change back. I could of course use two buttons, but It would be nice to have one button. I tried changing the id of the button right after changing the font size and then having a separate function for the new id to change it back, but that didn't seem to work.

Sorry, I'm new to Jquery :)

Thanks!

Never change ID's on the fly... ID's are mainly used for layout and must only be used at one place etc. (whole lot of reasons) . Use classes instead e.g. you can add multiple classes to a tag. — Marc Uberstein, Mar 25 '11 at 11:57

Loktar · Accepted Answer · 2011-03-25T11:48:14.410

3

Make a class for the style you want and use toggleClass to toggle the class.

Example usage

$(this).toggleClass('class');

Live Demo

To animate include jQueryUI effects core and do this

$(this).toggleClass('large', delay);

Animation Demo

Reference

edited Mar 25 '11 at 11:48

answered Mar 25 '11 at 11:42

Loktar

34,764
7
90
104

Thanks that worked like a charm! Btw is their a source url for the effects core that one can link to without including it in the root folder? – Peter Mar 25 '11 at 23:46
@user676610 go here http://jqueryui.com/download and you should be able to pick the effects core. Or just put this in the script src attribute http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js – Loktar Mar 26 '11 at 00:29

score 1 · Answer 2 · edited May 23 '17 at 11:47

1

possibly a repeat of this jQuery toggle CSS?

edited May 23 '17 at 11:47

Community

1
1

answered Mar 25 '11 at 11:42

Josh Kovach

7,679
3
45
62

score 1 · Answer 3 · answered Mar 25 '11 at 11:53

1

Try this

 $(function(){

    $('#button').click(function(){

    if (!$('.targetContainer').hasClass('bigFont'))
    $('.targetContainer').addClass('bigFont');
    else
    $('.targetContainer').removeClass('bigFont');

    });
});

answered Mar 25 '11 at 11:53

Marc Uberstein

12,501
3
44
72

basically setting up the event on the button. Check if the target container has the class style you want to add, if not - set class and if it has - remove class. – Marc Uberstein Mar 25 '11 at 11:55
1

Why not just use toggleClass instead of creating your own? – Loktar Mar 25 '11 at 12:03
For more control, I never use toggle...especially with the animation.. coz clicking it quite quickly causes a bug. – Marc Uberstein Mar 25 '11 at 12:20

score 0 · Answer 4 · answered Mar 25 '11 at 11:43

0

learn jQuery first changing of CSS can be done using toggle function. http://api.jquery.com/toggle/

$('button').click(function() { $('this').toggle('slow', function() { // Animation complete. }); });

answered Mar 25 '11 at 11:43

sushil bharwani

29,685
30
94
128

Toggle animation or Css

4 Answers4