jQuery addClass example

Change class name on click in jQuery

by samonela

HTML

<main class="SDmain">
  <h2 class="pagetitle"></h2>
  <h1 class="about-title" id="text0">Hello</h1>
  <div class="about-body b" id="text1">
    <p>Welcome.<br>My name is Erik. <br>I enjoy Minimalism.</p>
  </div>
  <div class="about-body c">
    <p>I made this happen with<br>Javascript and JQuery.
    </p>
  </div>
  <div class="about-body d">
    <p>I like Java as well.<br>Programs just make sense to me.
    </p>
  </div>
  <div class="about-body e">
    <p>I have made apps for android, websites for my friends, and I am looking for new projects.<br>You can find my other works in the Portfolio.
    </p>
  </div>
  <div class="about-body f">
    <p>I write about my life occasionally. If that interests you, it drains out of my head into my Blog.
    </p>
  </div>
  <div class="about-body g">
    <p>I am currently seeking my first job in Software Development.<br><br>My Resume can be found on the Contact page.
    </p>
  </div>
  <div class="about-body h">
    <p>Thank you for reading.
    </p>
  </div>
  <button class="button" id="b"> Play </button>
</main>

CSS

/* ------------------------------THE RESET----------------------------*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
  background-color: black;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*-----------MY CODE-----------*/

* {
  font-family: Futura, Futura-Medium, "Futura Medium", "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", sans-serif;
  color: white
}

.frontpage {
  font-family: Futura, Futura-Medium, "Futura Medium", "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", sans-serif;
  text-transform: uppercase;
  letter-spacing: 8px;
  font-size: 3.5em;
  text-align: center;
  padding-top: 1.25em;
  z-index: 1;
  position: relative;
  color: white;
  text-shadow: 0 0 15px black;
}

.frontname {
  font-size: 2em;
  padding-bottom: .2em;
}

.navbar {
  font-family: Futura, Futura-Medium, "Futura Medium", "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", sans-serif;
  letter-spacing: 3px;
  background-color: #000;
  position:...

JavaScript

function fadeInOutNext(element) {
   const next = element.next();
   element.delay(500).fadeIn(300).delay(4000).fadeOut(300, function() {
     if (next) {
       fadeInOutNext(next);
     }
   });
 }
 $(document).ready(function() {
   $(document).click(function(e) {
     var targetCollection = $(e.target);
     if (targetCollection.hasClass('button')) {
       console.log('button class detected')
       targetCollection.fadeOut(300, function() {
         $("h1.about-title").fadeOut(300, fadeInOutNext.bind(null, $("div.b")));
       });
     }
   });
   /*
    $("button.button").click(function(){
     $("h1.about-title").fadeOut(300, function() {
      $("div.b").delay(500).fadeIn(300).delay(4000).fadeOut(300, function(){
       $("div.c").delay(500).fadeIn(300).delay(4000).fadeOut(300, function(){
        $("div.d").delay(500).fadeIn(300).delay(4000).fadeOut(300, function(){
         $("div.e").delay(500).fadeIn(300).delay(5000).fadeOut(300, function(){
          $("div.f").delay(500).fadeIn(300).delay(5000).fadeOut(300, function(){
           $("div.g").delay(500).fadeIn(300).delay(5000).fadeOut(300, function(){
            $("div.h").delay(500).fadeIn(300).delay(4000).fadeOut(300, function(){

              });         
             });          
            });          
           });   
          });         
         });
        }); 
       });
      }); */
 });