jQuery fadeIn(), fadeOut() and fadeTo() example

by HYEONGJINKIM

HTML

<div class="clear">
  <h3>fadeOut() example</h3>

  <div class="fadeOutbox">
    Click me - fadeOut()
  </div>

  <div class="fadeOutbox">
    Click me - fadeOut()
  </div>
</div>
<div class="clear">
  <h3>fadeIn() example</h3>

  <div class="fadeInbox">
    Click me - fadeIn()
  </div>

  <div class="fadeInbox">
    Click me - fadeIn()
  </div>
</div>
<div class="clear">
  <h3>fadeTo() example</h3>

  <div class="fadeTobox">
    Click me - fadeTo()
  </div>

  <div class="fadeTobox">
    Click me - fadeTo()
  </div>
</div>
<div class="clear">
  <button id="reset">Reset</button>
</div>

CSS

.fadeOutbox,
.fadeInbox,
.fadeTobox {
  float: left;
  padding: 8px;
  margin: 16px;
  border: 1px solid red;
  width: 200px;
  height: 50px;
  background-color: #000000;
  color: white;
}

.clear {
  clear: both;
}

JavaScript

$(".fadeOutbox").click(function() {
  $(this).fadeOut('slow');
});

$(".fadeInbox").click(function() {
  $(this).hide().fadeIn(2000);
});

$(".fadeTobox").click(function() {
  $(this).fadeTo('fast', 0.2);
});

$("#reset").click(function() {
  location.reload();
});