How to use ToggleClass fadeIn using jquery

Question

I am trying to create many different animations on my website. For example, I have HTML tags that contain headings / paragraphs / intervals. I would like the headings to change color, then disappear, and the paragraph disappear with a different color, etc. here is an example of my html:

<button>Toggle Me</button>
<h1>My First Line</h1>
<h2>The Second Line</h2>
<p>This is a paragraph.</p>
<span>This is a span.</span>

And here is an example of a little jquery I tried:

$(document).ready(function(){
    $("button").click(function(){
        $("h1").toggleClass("blue");
        $("h2").toggleClass("yellow");
        $("p").toggleClass("red");
    });
});

what's the CSS example:

.blue {
    color: blue;
}

Any advice on how to make this work would be greatly appreciated:

Answer 1

You can try using fadeIn, try the following code: so add the hide class to the html tags as shown below:

<button>Toggle class</button>
<h1 class="hide">My First Line</h1>
<h2 class="hide">The Second Line</h2>
<p class="hide">This is a paragraph.</p>
<span class="hide">This is a span.</span>

Also you need to determine what in css:

.blue {
    color: blue;
}
.yellow {
    color: yellow;
}
.red {
    color: red;
}
.gray{
    color: gray;
}
.hide{
    display:none;
}

And how do you use it in a script:

$(document).ready(function(){
    $("button").click(function(){
        $("h1").fadeIn(4000).toggleClass("blue");
        $("h2").fadeIn(4000).toggleClass("yellow");
        $("p").fadeIn(4000).toggleClass("red");
        $("span").fadeIn(4000).toggleClass("gray");
    });
});

4000 = 4 , . , .

Answer 2

, CSS

CSS script h1:

h1 {
  opacity: 0;
}

.blue {
  color: blue;
  opacity: 1;
  transition: opacity 300ms ease-out;
}

.

, display: none; CSS display: block; .