title: How to add and remove classes in jq?
body: <p>Hello please solve my problem.. searching for hours but no proper and working solution found so finally I decided to post it here.</p>
  
  <p>Here is HTML</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="first"&gt;
              &lt;img src="Untitled-1.png" width="300px" height="300px"&gt;
              &lt;img src="Untitled-1.png" width="300px" height="300px"&gt; &lt;br&gt;
              &lt;button id="start" &gt;START&lt;/button&gt;
              &lt;button id="stop"&gt;STOP&lt;/button&gt;
              &lt;button id="slow" &gt;SLOW&lt;/button&gt;
              &lt;button id="fast" &gt;FAST&lt;/button&gt;   
      &lt;/div&gt;     
  &lt;/body&gt;
  </code></pre>
  
  <p>here is my CSS:</p>
  
  <pre><code>&lt;style&gt;
  .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);}
  }  
  &lt;/style&gt;
  </code></pre>
  
  <p>Here is jQuery:</p>
  
  <pre><code>$(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');
          });     
  
  });
  </code></pre>
  
  <p>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 </p>
  
  <pre><code>$('#first').on('click','#slow',function(){
  $('img').removeClass().addClass('slow');});
  </code></pre>
  
  <p>but not working.</p>