jQuery fadein fadeout

This jsfiddle is a simple jQuery function that fades in a picture when the document loads. There are also fade in and fade out buttons.

by oktaviardi pratama

HTML

<body>
  <div>
    <img class="header-img" src="https://whitebuffalowebsites.com/images/header2.png" height="100" width="300">

  </div>

  <button class="btn1">Fade out</button>
  <button class="btn2">Fade in</button>

  <p>How does jQuery work?</body>
<ul>
  <li>A $ sign to define/access jQuery</li>
  <li>A (selector) to "query (or find)" HTML elements</li>
  <li>A jQuery action() to be performed on the element(s)</li>
</ul>

</body>

CSS

div {
  height: 130px;
}

button {
  font-size: 20px;
  color: purple;
}

JavaScript

$(document).ready(function() {
  $('.header-img').hide().fadeIn(600);

  $(".btn1").click(function() {
    $(".header-img").fadeOut(600);
  });
  $(".btn2").click(function() {
    $(".header-img").fadeIn(600);
  });

});