title: Add/Remove Class Fade Not Working
body: <p>I'm new to development so please go easy on me :)</p>
  
  <p>I've started to create a body background slider on my eCommerce platform which I hope will eventually be able to toggle through a selection of body background images (not made it that far yet).</p>
  
  <p>I've managed to create a page that toggles body background images with "Previous" and "Next" buttons by removing and adding classes but the crossfading doesn't work, please see below:</p>
  
  <p><a href="https://zoeyplayground-com.zoeysite.com/lookbook" rel="nofollow">https://zoeyplayground-com.zoeysite.com/lookbook</a></p>
  
  <p>Here is my code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;script&gt;
      jQuery(document).ready(function() {
          jQuery(".next").click(function() {
              jQuery("body").removeClass("bodybackground1").fadeOut('slow');
              jQuery("body").addClass("bodybackground2").fadeIn('slow');
          });
      });
  &lt;/script&gt;
  
  &lt;script&gt;
      jQuery(document).ready(function() {
          jQuery(".back").click(function() {
              jQuery("body").removeClass("bodybackground2").fadeOut('slow');
              jQuery("body").addClass("bodybackground1").fadeIn('slow');
          });
      });
  &lt;/script&gt;
  
  &lt;div id="toggle" width="100%"&gt;
  &lt;img src="/media/import/back.png" class="back"&gt;
  &lt;img src="/media/import/next.png" class="next"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.bodybackground1 { 
      background: url('/media/import/background1.jpg') no-repeat center center fixed;
      background-size: cover;
      overflow: hidden;
      transition: all 0.5s;
  }
  
  .bodybackground2 {
      background: url('/media/import/background2.jpg') no-repeat center center fixed;
      background-size: cover;
      overflow: hidden;
      transition: all 0.5s;
  }
  
  #toggle img {
      margin-top: 400px;
      display: inline;
  }
  
  #toggle .next {
      float: right;
  }
  
  #toggle img:hover {
      cursor: pointer;
      opacity: 0.8;
  }
  </code></pre>
  
  <p>Would anybody be able to please explain why the fade isn't working? Any guidance or advice is appreciated. Thank you very much.</p>