How to add and remove classes in jq?

Question

Hello please solve my problem.. searching for hours but no proper and working solution found so finally I decided to post it here.

Here is HTML

<body>
    <div id="first">
            <img src="Untitled-1.png" width="300px" height="300px">
            <img src="Untitled-1.png" width="300px" height="300px"> <br>
            <button id="start" >START</button>
            <button id="stop">STOP</button>
            <button id="slow" >SLOW</button>
            <button id="fast" >FAST</button>   
    </div>     
</body>

here is my CSS:

<style>
.anim{      
    animation-name:test;
    animation-delay:0s;
    animation-direction:normal;
    animation-timing-function:linear;
    animation-duration:500ms;
    animation-iteration-count:infinite;     
    }
    .slow{      
    animation-name:test;
    animation-delay:0s;
    animation-direction:normal;
    animation-timing-function:linear;
    animation-duration:1500ms;
    animation-iteration-count:infinite;     
    }
    .fast{      
    animation-name:test;
    animation-delay:0s;
    animation-direction:normal;
    animation-timing-function:linear;
    animation-duration:200ms;
    animation-iteration-count:infinite; 
}

@keyframes test{
    0%{transform:rotateZ(0deg);}
    50%{transform:rotateZ(180deg);}
    100%{transform:rotateZ(360deg);}
}  
</style>

Here is jQuery:

$(document).ready(function(){ 
        $('#first').on('click','#start',function(){
        $('img').addClass('anim');
        });

        $('#first').on('click','#stop',function(){
        $('img').removeClass();
        });

        $('#first').on('click','#slow',function(){
        $('img').removeClass().addClass('slow');

        });

        $('#first').on('click','#fast',function(){
        $('img').removeClass().addClass('fast');
        });     

});

Look at the jQuery.. I want to change the class (whichever is applied) to another class depending upon the button being pressed. If the "slow" button is pressed, existing class should be removed and a '.slow' class should be applied. i tried all suggested methods on internet and even on this forum but didn't worked. I tried this code as suggesties by others

$('#first').on('click','#slow',function(){
$('img').removeClass().addClass('slow');});

but not working.

@entropic: Uhm *" If no class names are specified in the parameter, all classes will be removed."*. You also have to read the documentation, not just find it ;) — Felix Kling, Oct 07 '14 at 17:44
yes i did. I want to remove class whichever is applied not a specific class. Felix Kling agreed. — , Oct 07 '14 at 17:44
Really ? You tell him to read the doc when it shows explicitely that you are wrong ? OP, when i try putting this into a jsfiddle, it seems to work as expected. — Antoine Combes, Oct 07 '14 at 17:44
Wow, never knew that before. Guess I should try reading the documentation too. My bad.. I'll delete my comment. — entropic, Oct 07 '14 at 17:46
Here's the [jsfiddle](http://jsfiddle.net/7yqhyngo/) i used to test it. — Antoine Combes, Oct 07 '14 at 17:52
We can't help you if we are unable to reproduce the issue. Maybe jQuery didn't load properly? — Felix Kling, Oct 07 '14 at 17:57
you are playing with colors. i have set animation on all four classes.. and animation has transform rotateZ property.. animation speed changes as the button is pressed.. Listen i can change the speed by first pressing the stop button thiss will remove all classes then i press slow button and this way i can change the speed.. but i want the speed to change while it is running. — , Oct 07 '14 at 17:59
@WaqarAdilMughal: Aha, that's a totally different problem you are describing in the comment. Your question reads like that you are not able to remove and add classes with jQuery, while your actual problem is that the animation parameters are not updated when changing classes. Please [edit] your question and add a description of your actual problem. — Felix Kling, Oct 07 '14 at 18:04
@AntoineCombes i wasnt aggressive at all.. sorry if you did mind' — , Oct 07 '14 at 18:05
@FelixKling YES you are right.. i can remove class class if i press stop button.. stop button says '$('selector').removeClass(), but i cannot switch class where switch class means $('selector').removeClass().addClass('class_name') — , Oct 07 '14 at 18:08
As you can see by the jsFiddle Antoine posted ( http://jsfiddle.net/7yqhyngo/) adding and removing classes works. The problem is that the new CSS properties received through the classes don't update the animation itself. So again: Your problem has nothing to do with adding and removing classes. Here is another example with your code: http://jsfiddle.net/pgp8fLfL/2/. Note how the color of the border changes, which is proof that changing classes "works". — Felix Kling, Oct 07 '14 at 18:10
You should probably ask a new question at this point, about CSS animations, not about adding and removing classes. Introduce the problem properly, explain what you expect and what you get. Don't jump to conclusions about what does and doesn't work or at least verify your assumptions, before you mention them. Then you could have avoided this mess. — Felix Kling, Oct 07 '14 at 18:15
i have already lost so many reputation :(.. Bro you mean jquery works fine but the error is in animation.. hmm thats right.. i will post another question.. thanks @FelixKling — , Oct 07 '14 at 18:16

score 2 · Accepted Answer · 2014-10-07T20:06:42.037

Finally i managed to solve this issue.. Actually i was using 'prefix-free.js' which was not correctly coded for chrome. Once i changed the browser and run that code on firefox, it worked perfectly. Due to that prefex-free.js i didn't apply -webkit- or -moz-. Well Thanks all who participated..

EDITED: Sorry that prefix-free.js has nothing to do with this issue. The issue was due to CHROME browser. I have reported this problem to the developers of chrome. I hope they will resolve the issue on priority basis.

Harutyun Abgaryan · Answer 2 · 2014-10-07T18:06:51.710

0

Try this

$(document).ready(function(){ 
    $('#first').on('click','#start',function(){
    $('img').addClass('anim');
    });

    $('#first').on('click','#stop',function(){
    $('img').removeClass();
    });

    $('#first').on('click','#slow',function(){
    $('img').removeClass().addClass('slow');

    });

    $('#first').on('click','#fast',function(){
    $('img').removeClass().addClass('fast');
    });

});

edited Oct 07 '14 at 18:06

answered Oct 07 '14 at 17:44

Harutyun Abgaryan

2,013
1
12
15

1

@HarutyunAbgaryan you have written the same code as in question. What is the point of it? Once again: problem is not in adding-removing classes, but in animation for these classes. – Regent Oct 07 '14 at 18:08
Man you have written the same code as in my question??? whats the difference? My friend @HarutyunAbgaryan you have changed css.. try animation instead.. thanks – Oct 07 '14 at 18:12

score -1 · Answer 3 · answered Oct 07 '14 at 17:44

-1

You can try to remove classes with

$("img").removeAttr('class');

and then add new classes with

$("img").attr('class', 'new-classes');

answered Oct 07 '14 at 17:44

Monte

1,018
8
15

Why are you suggesting this? What is the problem with `removeClass` and why would your solution help here? – Felix Kling Oct 07 '14 at 17:45
This is useful if you don't know what classes an element has. – Monte Oct 07 '14 at 17:48
1

@Monte `.removeClass()` will delete all element's classes. – Regent Oct 07 '14 at 17:49
I also don't have to know which classes an element has with `removeClass`. – Felix Kling Oct 07 '14 at 17:49
Well, the question says that removeClass method is not working, so i proposed another suggested that has nothing wrong, i suppose. – Monte Oct 07 '14 at 17:54
So, in which situations would `.removeAttr(...)` work, but `removeClass` wouldn't? Because that would be the only situation where your "solution" would be helpful. My point is that if `removeClass` doesn't work, then yours probably wouldn't either, because the problem is somewhere. – Felix Kling Oct 07 '14 at 18:01
@FelixKling for all that I see, the problem is not in classes, but in animation for added classes. – Regent Oct 07 '14 at 18:04
@Regent: yeah, the OP's comment made it clear. It's very different from what was mentioned in the question. – Felix Kling Oct 07 '14 at 18:05

How to add and remove classes in jq?

3 Answers3