Exercise - jQuery Effects and Plugins

by Ryan Morris

HTML

<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<div>
<h1>
Hello world
</h1>
<p class="do-not-animate">
Don't animate me
</p>
</div>

CSS

div{
  width:50%;
  height:50%;
  margin:0 auto;
  border:1px solid #e0e0e0;
  border-radius:3px;
}

h1{
  text-align:center;
  font-family:Arial;
}

JavaScript

// IIFE to support scoped variables and jQuery alias
(function($){

  // privately scoped stuff
  var color = "red";
  
  $.fn.myAnimation = function() {
  	
    // basic, without the "do-not-animate" check
    this.fadeOut("slow").fadeIn("slow");
    
    // with "do-not-animate" check
    /*
    this.each(function(i, el) {
      var $el = $(el);
      
      if (!$el.hasClass('do-not-animate')) {
          $el.fadeOut("slow").fadeIn("slow");
      }
      
    });
    */
    
    // support chaining
    return this;
  
  }

})(jQuery);

// Test it out!
$("h1, p").myAnimation();